CSS animation day 45 となりました。
そろそろ継続がしんどくなってきました。
が、日本の医療の未来のために、頑張ります。
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 アニメーションがあれば、無限の表現ができそうですね。
それでは、また明日〜