animation 으로 놀아내기 - SVG Clip Path -

20489 단어 CSSanimation
CSS animation day 53이 되었습니다.

오늘은 SVG-Clip Path를 사용하여 이전 작품을 준비합니다.

1. 완성판



See the Pen 사쿠라 폭포 by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



CSS Tricks

BRISK



3. 분해해 본다



❶.



Figma에서 벚꽃을 만드십시오.





의 Union 버튼을 눌러 그룹화합니다.

그런 다음 마우스 오른쪽 버튼을 클릭 → Copy as SVG에서 SVG 코드를 복사합니다.



가능하면 마크업합시다.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <svg
        width="189"
        height="180"
        viewBox="0 0 189 180"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M92.4998 74.1024C106.031 74.1024 117 56.1961 117 34.1024C117 -9.92887 112.528 -2.62418 105.772 8.41097C101.948 14.661 97.3909 22.1024 92.4998 22.1024C87.6394 22.1024 83.1097 15.2703 79.3001 9.52425C72.5042 -0.729652 67.9998 -7.52262 67.9998 34.1024C67.9998 56.1961 78.969 74.1024 92.4998 74.1024ZM76.0472 85.2C80.2288 72.3328 66.5862 56.3641 45.576 49.5399C3.69804 35.9305 9.26396 42.4422 17.6717 52.2782C22.4314 57.8446 28.1018 64.4774 26.5906 69.1297C25.0887 73.7547 17.1897 75.95 10.5472 77.7977C-1.30245 81.0946 -9.15499 83.2782 30.4339 96.1414C51.4441 102.966 71.866 98.0711 76.0472 85.2ZM157.184 94.1414C136.174 100.97 115.752 96.0711 111.571 83.2C107.389 70.3328 121.032 54.3641 142.042 47.5399C181.632 34.6766 176.562 41.0594 168.912 50.6922C164.624 56.0907 159.526 62.5086 161.028 67.1297C162.539 71.7821 171.027 73.8172 178.15 75.5243C190.732 78.5399 199.061 80.536 157.184 94.1414ZM81.3772 102.403C70.4305 94.45 51.0301 102.489 38.0452 120.364C12.1634 155.985 20.075 152.704 32.0267 147.747C38.7928 144.942 46.8543 141.598 50.8113 144.473C54.7434 147.329 54.3919 155.52 54.096 162.407C53.5686 174.696 53.219 182.841 77.6868 149.165C90.6717 131.294 92.324 110.356 81.3772 102.403ZM114.077 154.048C101.092 136.177 99.4397 115.239 110.387 107.286C121.333 99.3328 140.734 107.376 153.719 125.247C178.186 158.923 170.549 156.075 159.025 151.774C152.565 149.364 144.885 146.501 140.952 149.356C136.995 152.231 137.684 160.931 138.262 168.235C139.283 181.134 139.959 189.673 114.077 154.048ZM96.4998 103.001C103.956 103.001 110 97.1805 110 90.0008C110 82.8211 103.956 77.0008 96.4998 77.0008C89.0437 77.0008 82.9998 82.8211 82.9998 90.0008C82.9998 97.1805 89.0437 103.001 96.4998 103.001Z"
          fill="#C4C4C4"
        />
      </svg>
    </div>
  </body>
</html>




styles.scss

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #200122, #6f0000);
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}





Figma로 만든 SVG 이미지를 브라우저에서 볼 수있었습니다.




❷.

그럼, ClipPath 를 작성해 갑니다만, 방법으로서는, 3step로 나뉩니다.



먼저 자르고 싶은 SVG를 숨긴 다음 ClipPath 요소를 만들어 마지막으로 자르고 싶은 이미지에 적응하여 완성합니다.

그럼, 가자.




1: SVG 자체를 숨깁니다. 



<svg width: 0, height: 0, style=”position: absolute; top: 0; left: 0;” >
　　　　　　　　・・・
</svg>


2: ClipPath 요소를 만든다. 



<svg width: 0, height: 0, style=”position: absolute; top: 0; left: 0;” >
   <clipPath>
      <path d = "~">
   </clipPath>
</svg>


실제로 코드를 살펴보자.




index.html

     <svg
        width="0"
        height="0"
        style="position: absolute; top: 0; left: 0;"
        xmlns="http://www.w3.org/2000/svg"
      >
        <clipPath id="sakura">
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M92.4998 74.1024C106.031 74.1024 117 56.1961 117 34.1024C117 -9.92887 112.528 -2.62418 105.772 8.41097C101.948 14.661 97.3909 22.1024 92.4998 22.1024C87.6394 22.1024 83.1097 15.2703 79.3001 9.52425C72.5042 -0.729652 67.9998 -7.52262 67.9998 34.1024C67.9998 56.1961 78.969 74.1024 92.4998 74.1024ZM76.0472 85.2C80.2288 72.3328 66.5862 56.3641 45.576 49.5399C3.69804 35.9305 9.26396 42.4422 17.6717 52.2782C22.4314 57.8446 28.1018 64.4774 26.5906 69.1297C25.0887 73.7547 17.1897 75.95 10.5472 77.7977C-1.30245 81.0946 -9.15499 83.2782 30.4339 96.1414C51.4441 102.966 71.866 98.0711 76.0472 85.2ZM157.184 94.1414C136.174 100.97 115.752 96.0711 111.571 83.2C107.389 70.3328 121.032 54.3641 142.042 47.5399C181.632 34.6766 176.562 41.0594 168.912 50.6922C164.624 56.0907 159.526 62.5086 161.028 67.1297C162.539 71.7821 171.027 73.8172 178.15 75.5243C190.732 78.5399 199.061 80.536 157.184 94.1414ZM81.3772 102.403C70.4305 94.45 51.0301 102.489 38.0452 120.364C12.1634 155.985 20.075 152.704 32.0267 147.747C38.7928 144.942 46.8543 141.598 50.8113 144.473C54.7434 147.329 54.3919 155.52 54.096 162.407C53.5686 174.696 53.219 182.841 77.6868 149.165C90.6717 131.294 92.324 110.356 81.3772 102.403ZM114.077 154.048C101.092 136.177 99.4397 115.239 110.387 107.286C121.333 99.3328 140.734 107.376 153.719 125.247C178.186 158.923 170.549 156.075 159.025 151.774C152.565 149.364 144.885 146.501 140.952 149.356C136.995 152.231 137.684 160.931 138.262 168.235C139.283 181.134 139.959 189.673 114.077 154.048ZM96.4998 103.001C103.956 103.001 110 97.1805 110 90.0008C110 82.8211 103.956 77.0008 96.4998 77.0008C89.0437 77.0008 82.9998 82.8211 82.9998 90.0008C82.9998 97.1805 89.0437 103.001 96.4998 103.001Z"
            fill="#C4C4C4"
          />
        </clipPath>
      </svg>



이것으로 벚꽃 모양의 주형이 완성됩니다.




❸.

마지막 단계로서 ❷로 만든 주형을 자르고 싶은 이미지에 적응합니다.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <svg
        width="0"
        height="0"
        style="position: absolute; top: 0; left: 0;"
        xmlns="http://www.w3.org/2000/svg"
      >
        <clipPath id="sakura">
          <path
            d="M92.4998 74.1024C106.031 74.1024 117 56.1961 117 34.1024C117 -9.92887 112.528 -2.62418 105.772 8.41097C101.948 14.661 97.3909 22.1024 92.4998 22.1024C87.6394 22.1024 83.1097 15.2703 79.3001 9.52425C72.5042 -0.729652 67.9998 -7.52262 67.9998 34.1024C67.9998 56.1961 78.969 74.1024 92.4998 74.1024ZM76.0472 85.2C80.2288 72.3328 66.5862 56.3641 45.576 49.5399C3.69804 35.9305 9.26396 42.4422 17.6717 52.2782C22.4314 57.8446 28.1018 64.4774 26.5906 69.1297C25.0887 73.7547 17.1897 75.95 10.5472 77.7977C-1.30245 81.0946 -9.15499 83.2782 30.4339 96.1414C51.4441 102.966 71.866 98.0711 76.0472 85.2ZM157.184 94.1414C136.174 100.97 115.752 96.0711 111.571 83.2C107.389 70.3328 121.032 54.3641 142.042 47.5399C181.632 34.6766 176.562 41.0594 168.912 50.6922C164.624 56.0907 159.526 62.5086 161.028 67.1297C162.539 71.7821 171.027 73.8172 178.15 75.5243C190.732 78.5399 199.061 80.536 157.184 94.1414ZM81.3772 102.403C70.4305 94.45 51.0301 102.489 38.0452 120.364C12.1634 155.985 20.075 152.704 32.0267 147.747C38.7928 144.942 46.8543 141.598 50.8113 144.473C54.7434 147.329 54.3919 155.52 54.096 162.407C53.5686 174.696 53.219 182.841 77.6868 149.165C90.6717 131.294 92.324 110.356 81.3772 102.403ZM114.077 154.048C101.092 136.177 99.4397 115.239 110.387 107.286C121.333 99.3328 140.734 107.376 153.719 125.247C178.186 158.923 170.549 156.075 159.025 151.774C152.565 149.364 144.885 146.501 140.952 149.356C136.995 152.231 137.684 160.931 138.262 168.235C139.283 181.134 139.959 189.673 114.077 154.048ZM96.4998 103.001C103.956 103.001 110 97.1805 110 90.0008C110 82.8211 103.956 77.0008 96.4998 77.0008C89.0437 77.0008 82.9998 82.8211 82.9998 90.0008C82.9998 97.1805 89.0437 103.001 96.4998 103.001Z"
          />
        </clipPath>
      </svg>

      <svg width="300" height="300" viewBox="0 0 300 300">
        <image
          xlink:href="https://dl.dropbox.com/s/pzaxobsyspbfrjw/wa.png?dl=0"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid slice"
          clip-path="url(#sakura)"
        />
      </svg>
    </div>
  </body>
</html>





clip-path="url(#sakura)"



에서 적응하고 있음을 알 수 있습니다.

이것으로 완성입니다.




❹.

그럼, 이 clip-path 에 애니메이션을 붙이자.




index.html

  <clipPath id="sakura">
          <path class = "clip"
            d="・・・
  </clipPath>

  <svg width="1000" height="1000" viewBox="-500 0 1000 1000">
        <image
          xlink:href="https://dl.dropbox.com/s/pzaxobsyspbfrjw/wa.png?dl=0"
          width="200%"
          height="200%"
          preserveAspectRatio="xMidYMid slice"
          clip-path="url(#sakura)"
        />
  </svg>




styles.scss


.clip {
  animation: move 10s linear infinite;
}

@keyframes move {
  0% {
    transform: translate(0px, -400px);
  }
  20% {
    transform: translate(-30px, -200px) scale(1);
  }
  40% {
    transform: translate(0px, 0px) scale(1);
  }
  60% {
    transform: translate(-5px, 200px) scale(1);
  }
  80% {
    transform: translate(15px, 400px) scale(1);
  }

  100% {
    transform: translate(0px, 700px) scale(1);
  }
}




See the Pen 사쿠라 폭포 by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .



<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

SVG 애니메이션도 쉽게 설정할 수 있었습니다.

그럼 또 내일~


animation에서 놀기 - CSS Clip Path-
animation 으로 놀기 - Conic Gradient -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage