CSS animation day21 となりました。
今日は都心で雪が降るそうです。
少しでもあったまるように、本日は、文字の中に炎が出てくるEffect を学びましょう。
#1. 完成版
See the Pen Fire Text Animation by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. 参考文献
CSS Burning Text Animation
炎の画像サイト
#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="flame">
<h1><span>CSS Animation</span></h1>
</div>
</div>
</body>
</html>
styles.css
body {
margin: 0px;
padding: 0px;
background: #000;
display: flex;
justify-content: center;
}
.container {
width: 100%;
height: 300px;
margin: 100px auto;
transform: translateY(50%);
}
h1 {
color: #fff;
font-size: 80px;
text-align: center;
}
span {
height: 300px;
width: 100%;
background-image: url("../img/flame.png");
background-position: 0 -1000px;
}
いいですね、ちょっとあったまってきました。
❷.
次に、背景の炎を、文字の中に移しましょう。
styles.css
span {
height: 300px;
width: 100%;
background-image: url("../img/flame.png");
background-position: 0 -1000px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
・background-clip
背景画像をどこまで表示するかという設定をするプロパティです。background-clip:text で、背景画像を文字だけに設定できます。ただし、最初に-webkit をつけないとうまく作動しないようです。こちら の記事に、大変わかりやすくまとめてありました。
・text-fill-color
text-fill-color をtransparent で透明にすることによって、背景の画像の炎を出してます。こちらも、ベンダープレフィックスの-web-kitをつけないといけません。こちら の記事にも簡潔にまとまっておりましたので、ご参照ください。
❸.
それでは、アニメーションを設定しましょう。
styles.css
span {
...
animation: fire 4s linear infinite;
}
@keyframes fire {
0% {
background-position: 0% -50%;
}
100% {
background-position: 0% -25%;
}
}
完成しました！
では、風邪ひかないようにお過ごしください〜
また明日！