animation에서 놀기 - CSS Clip Path-

12148 단어 CSSanimation
CSS animation day 52가 되었습니다.

이전 기사 에서 이미지를 잘라내는 방법으로 mask 속성을 소개했습니다.

오늘은 또 다른 방법인 clip-path 속성에 대해 소개하겠습니다.

1. 완성판



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


2. 참고문헌



CSS Clip Path Hover Circle Hover Effects | HTML CSS

CSS Clip-Path Maker

Introduction to Clipping Using clip-path in CSS



3. 분해해 본다



❶.

마크업하자.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="picture"></div>
    </div>
  </body>
</html>




styles.scss

body {
  margin: 0;
  padding: 0;
}

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

.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-repeat: no-repeat;
  background-size: cover;
}





예쁘네요.




❷.

이제 clip-path 속성을 사용합시다.




styles.scss


.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: circle(40%);
}





단숨에 일본의 느낌이 나왔습니다. 세련되네요! Clip-Path 속성을 설명합니다.



·Clip- Path (참고문헌: MDN )



요소의 「어느 부분을 표시할까?」를 설정하는 클리핑 영역을 만드는 프로퍼티입니다.

영역의 내부는 표시되고 외부는 숨겨집니다.



clip-path: <>에는 polygon, circle, ellipse 등의 지오메트리 값과 SVG의 clip-path 요소를 지정하는 url을 포함할 수 있습니다. 또한



참고문헌의 발전기를 사용하면 자신의 생각대로 이미지를 잘라낼 수 있을 것이다. 조속히 사용해 봅시다.



타원을 만들었습니다. 왼쪽 하단의 코드를 복사하여 CSS에 붙여넣습니다.




styles.scss


.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: ellipse(47% 57% at 71% 73%);
}





당신이 원하는 모양으로 이미지를 클리핑 할 수있었습니다.

그 외에도 연설 거품 형태이거나 별 모양이 있기 때문에 웹 사이트의 제목이나 삽입에 사용할 수 있네요.




❸.

clip-path에 대해 좀 더 깊이 살펴 보겠습니다. 



clip-path: ellipse(130px 140px at 10% 20%);


at 을 사용하여 position 의 위치를 ​​결정할 수 있습니다.

(position: absolute 때와 같은 배치를 결정하는 방법입니다.)





왼쪽 위, clip-path: ellipse(47% 57% atat 0% 0%);

오른쪽 하단이 clip:path: ellipse(47% 57% at 80% 100%);

됩니다.




❹.

이제 애니메이션을 만들어 봅시다.

이 at ~ 를 keyframe 으로 이동합니다.




styles.scss

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #200122, #6f0000); // 変更
}
.picture {
  width: 100%;
  height: 100%;
  background: url("../img/wa.png");
  background-attachment: fixed;
  background-size: cover;
  clip-path: circle(40%);
  animation: clipmove 12s ease-in-out infinite;
}

@keyframes clipmove {
  0%,
  100% {
    clip-path: circle(10% at 0 0);
  }

  50% {
    clip-path: circle(80% at 100% 100%);
  }
}




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



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

이와 같이, clip-path 프로퍼티 덕분에, photoshop 과 같은 이미지 조작을 할 수 있어, 매우 훌륭하네요.



그럼 다시 내일~


animation 으로 놀기 - Particle Button 1-
animation 으로 놀아내기 - SVG Clip Path -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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