1. 완성판

2. 참고문헌

Pure CSS Text Reveal From Smoke Animation Effect | CSS Animation Tutorial
연기 동영상

3. 분해해 본다

❶.
마크업하자.

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="smoke">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
    <video src="img/smoke.mp4" id="video" autoplay muted></video>
  </body>
</html>

styles.scss

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

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

span {
  color: #fffddd;
  font-size: 24px;
  display: inline-block;
  width: 2%;
  height: 2%;
  padding: 10px;
  text-align: center;
  line-height: 40px;
}

여기까지는 어제의 작품과 거의 같습니다.

❷.
캐릭터의 애니메이션을 생각해 봅시다.

라인이 누워서 거기에서 문자가 출현하고 마지막으로 연기에 의해 문자가 모두 사라지도록 만듭니다.
1: ラインを作って、動かす
이것은 before 의사 요소로 border를 만듭니다.

stylyes.css

.smoke:before {
  content: "";
  background: #fffddd;
  width: 50%;
  height: 1px;
  top: 55%;
  position: absolute;
}

다음으로 border를 움직이자.

styles.scss

.smoke:before {
  content: "";
  background: #fffddd;
  width: 50%;
  height: 1px;
  position: absolute;
  top: 55%;
  animation: lineReveal 0.3s ease-in-out forwards;
}

@keyframes lineReveal {
  0% {
    left: 0%;
  }
  100% {
    left: 25%;
  }
}

좋은 느낌입니다.
2: テキストが、線から出るようにしましょう。
styles.scss


span {
  color: #fffddd;
  font-size: 24px;
  display: inline-block;
  width: 2%;
  height: 2%;
  padding: 10px;
  text-align: center;
  line-height: 40px;
  animation: textReveal 0.8s ease-out both;
}


@keyframes textReveal {
  0%,
  60% {
    margin-top: 100px;
    opacity: 0;
  }

  100% {
    margin-top: 5px;
    margin: 1;
  }
}

❸.
smoke effect를 만듭니다.
video 태그를 사용하여 참고 문헌의 동영상을 불러옵니다.

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="smoke">
      <span>L</span>
      <span>O</span>
      <span>A</span>
      <span>D</span>
      <span>I</span>
      <span>N</span>
      <span>G</span>
    </div>
    <video src="img/smoke.mp4" id="video" autoplay muted></video>
  </body>
</html>

styles.scss


#video {
  position: fixed;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background-size: cover;
  z-index: -1;
}

포인트는
・연기의 동영상을 배치할 때는, position: fixed 로 해, 오른쪽 하단에 배치합니다. 거기에 width, height 를 auto 로 설정합니다.

・autoplay의 설정으로, 로드가 종료하면, 자동으로 즉시 재생합니다.

오늘은 이상입니다.
멋진 동영상과 CSS 애니메이션이 있으면 무한한 표현을 할 수 있을 것 같네요.
그럼 또 내일~

Reference

이 문제에 관하여(animation에서 놀기 - Text Smoke Animation -), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/duka/items/bdfc0e17bdf6ada4357e

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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