동작 / 튕김

Shopping bag bounce

구매, 저장한 상품과 상점 동작에 어울리는 가볍게 움직이는 쇼핑백입니다.

무료 사용 · CC0-1.0 ↗

96 × 96 PX · SVG

원하는 모습으로 편집

01 / 애니메이션재생 시간 (ms)시작 지연 (ms)속도 변화반복재생 방향움직임 강도1.0×

02 / 모양색상#253E35크기 (px)선 두께1.7 px

편집한 설정은 이 브라우저에 저장됩니다. 계정 없이 바로 사용할 수 있습니다.

바로 사용할 수 있는 SVG.

하나의 파일 · SVG + CSS

<svg xmlns="http://www.w3.org/2000/svg" id="svg-shopping-bag-bounce-jwg638" width="96" height="96" viewBox="0 0 24 24" fill="none" stroke="#253e35" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" role="img" aria-labelledby="svg-shopping-bag-bounce-jwg638-title">
  <title id="svg-shopping-bag-bounce-jwg638-title">Shopping bag bounce</title>
  <!-- Source: Motive Originals
Author: Motive project
Source page: /sources/original/
License: CC0-1.0 (https://creativecommons.org/publicdomain/zero/1.0/)
Original project artwork, CC0-1.0. No attribution required. -->
  <style>@keyframes svg-shopping-bag-bounce-jwg638-motion-0{0%{transform:translateY(0px)}25%{transform:translateY(-4px)}50%{transform:translateY(0px)}75%{transform:translateY(-1.5px)}100%{transform:translateY(0px)}}
#svg-shopping-bag-bounce-jwg638 [data-motion]{transform-box:view-box;transform-origin:12px 12px;animation-name:svg-shopping-bag-bounce-jwg638-motion-0;animation-duration:1400ms;animation-delay:0ms;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:normal;animation-fill-mode:both}
@media(prefers-reduced-motion:reduce){#svg-shopping-bag-bounce-jwg638 [data-motion]{animation:none}}</style>
  <g data-motion="motion">
    <path d="M5 8h14l1 13H4z M8 9V6a4 4 0 0 1 8 0v3"/>
  </g>
</svg>

CSS 애니메이션과 움직임 줄이기 지원이 포함됩니다. JavaScript나 외부 파일이 필요하지 않습니다.

작은 디테일, 세심한 사용.

상품을 추가하면 한 번 재생하고 바뀐 수량이나 확인을 글로 표시하세요.

움직임은 화면의 의미를 보조해야 합니다. 피드백에는 제한된 반복 횟수를 사용하고 중요한 정보는 글로도 전달하세요. 내려받은 SVG는 사용자의 움직임 줄이기 설정을 따릅니다.

SVG 사용 방법 ↗

카테고리: 동작
모션: 튕김
캔버스: 24 × 24 viewBox
라이선스: CC0-1.0
출처: Motive 직접 제작프로젝트에서 직접 제작한 도형
제작자: Motive 프로젝트
태그: 쇼핑백, 쇼핑, 구매

원하는 모습으로 편집

바로 사용할 수 있는 SVG.

작은 디테일, 세심한 사용.

함께 사용하기 좋은 아이콘.

Bookmark bounce

Copy bounce

Download bounce

Link draw

Paper plane draw