animation 으로 놀기 - Conic Gradient Loader -

13199 단어 CSSanimation
CSS animation day 55가 되었습니다.
오늘은 conic-gradient를 사용하여 애니메이션을 만듭니다.

1. 완성판



See the Pen Conic Glowing Loader by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



1 element rainbow spinner 2017

CSS animation에서 놀기 - Glowing Loading -



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="image">
        <div class="text">Loading...</div>
      </div>
    </div>
  </body>
</html>




styles.scss

body {
  margin: 0;
  padding: 0;
  background: radial-gradient(circle, #333, #111);
}

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

.image {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #333;
}

.text {
  color: #fffccc;
  text-align: center;
  line-height: 300px;
  font-size: 28px;
  letter-spacing: 3px;
  text-transform: uppercase;
}





미세하지만

body의 배경에 radial-gradient를 설정하면 재미 있습니다.

중심에서 방사상으로 동심원을 만들 수 있어 안쪽을 밝게, 바깥쪽을 어둡게 할 수 있습니다.

표현물이 빛을 발할 때 이 효과를 사용하면 빛으로 비추어지는 모습을 표현할 수 있습니다.




❷.

이제 conic-gradient를 사용합시다.

이미지로서는, 전회의 기사 와 같이, before 클래스와, calc 메소드를 사용합니다.




styles.scss

.image {
  position: relative;　　//追加
}


.image:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(orange, yellow, green, cyan, blue, violet, orange);
  width: calc(100% + 8px);
  height: calc(100% + 8px);
}





좋은 느낌입니다.

z-index를 제거하면 이렇게 됩니다.





원주 그라데이션은 이 conic-gradient가 최적이네요.




❸.

이제 애니메이션과 blur 기술을 사용합시다.

또한 모처럼이므로 img 클래스의 배경에 conic-gradient를 사용합시다.




styles.scss

.img{
      　　・・・
  background: conic-gradient(#333,#222, #111, #222, #333);
}

.image:before,
.image:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(orange, yellow, green, cyan, blue, violet, orange);
  animation: round 2s linear infinite;
}

.image:before {
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);

}

.image:after {
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  filter: blur(10px);
}

@keyframes round {
  100% {
    transform: rotate(360deg);
  }
}




See the Pen Conic Glowing Loader by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .



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

완성되었습니다.

conic-gradient 를 사용하면 간단하게 이런 원주 그라데이션을 할 수 있네요. 그럼 또 내일~


animation 으로 놀기 - Conic Gradient -
animation 으로 놀기 - Tilt.js 자기 소개-

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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