CSS animation day 44 となりました。
本日も、Loading を作っていきます。
1. 完成版
See the Pen Loading interaction by hiroya iizuka (@hiroyaiizuka) 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 を変えるなど)ので、
いじってみてください。それでは、また明日〜