animation 으로 놀기 - Glowing Loading 3 -

11621 단어 CSSanimation
CSS animation day 44가 되었습니다.
오늘도 Loading을 만들어 갑니다.

1. 완성판





See the Pen Loading interaction by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



Glowing text effect with pure CSS3



3. 분해해 본다



❶.

마크업하자.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="glowing">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
  </body>
</html>




styles.scss

body {
  margin: 0;
  padding: 0;
  background: #000;
}

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

span {
  color: #fffccc;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #fff000;
}





주의 사항으로

span은 인라인 요소이므로 width와 height는 단독으로 붙일 수 없습니다.

그럴 때는 display: inline-block 으로 해 봅시다.

자세한 것은, 살와카 의 기사에 대단히 쉽게 되어 있습니다.




❷.

애니메이션을 만듭니다.

box-shadow, inset 로 상자 안에 색을 붙여 문자의 색과 두께를 변화시킵니다.




styles.scss

span {
  color: #fffccc;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #fff000;
  animation: glowing 1s linear infinite;
}

@keyframes glowing {
  100% {
    color: #000;
    font-weight: bold;
    box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset;
  }
}





좋은 느낌입니다!




❸.

의사 요소와 루프 문을 사용하여 각각에 animation-delay를 설정합시다.




styles.scss


span {
  color: #fffccc;
  font-size: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  border: 1px solid #fff000;
  animation: glowing 1.5s ease-in-out infinite;

  @for $i from 1 through 7 {
    &:nth-child(#{$i}) {
      animation-delay: 0.1 * $i + s;
    }
  }
}

@keyframes glowing {
  50% {
    color: #000;
    font-weight: bold;
    box-shadow: 80px 0px 10px hsl(300, 100%, 100%) inset;
  }
}





완성되었습니다!

오늘의 작품은 비교적 심플한 코드였습니다.

그 밖에도 여러 가지 표현 방법이 있다 (blur 이나 border, scale, transdorm 를 바꾸는 등) 때문에,

만나보세요. 그럼 또 내일~


animation 으로 놀기 - Gooey Loading -
animation에서 놀기 - Text Smoke Animation -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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