CSS animation day 41となりました。
今回から、Loading メニューを作っていきます。
#1. 完成版
See the Pen Glowing Loader by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. なぜか？
Loading で待っている時間って、本当に辛いですよね。
この時に、面白いアニメーションが見れたら、どんなに素敵なことでしょう。外来の待合でもそうですが、ただ待たされるのではなく、ディズニーランドのように、待っている間にいかにワクワクできるかが、非常に重要と考えます。
#3. 参考文献
Glowing Gradient Loader Ring Animation Effects | CSS Animation Tutorial
CSS animation で遊び倒す - Beautiful Button -
CSS animation で遊び倒す - 太陽 -
#4. 分解してみる
❶.
マークアップしましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="loader">
<span></span>
</div>
</body>
</html>
styles.scss
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #000;
height: 100vh;
}
.loader {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(#00c9ff, #92fe9d);
}
綺麗な丸ができました。
❷.
では、円の中心に空洞をつくりましょう。
styles.scss
.loader :before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background-color: #000;
border-radius: 50%;
}
擬似要素beforeクラスを使い、中心に黒丸を作りました。
❸.
では、アニメーションを作りましょう。
styles.scss
.loader {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(#00f260, #0575e6);
animation: roundMove 1s linear infinite;
}
@keyframes roundMove {
100% {
transform: rotate(360deg);
}
}
いい感じです。
❹.
では最後に、blurをかけましょう。
styles.scss
.loader :after {
content: "";
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
width: 110px;
height: 110px;
background: linear-gradient(#00f260, #0575e6);
border-radius: 50%;
filter: blur(20px);
}
できました！
simpleだけど、目を惹くデザインで、飽きないですね。
それでは、また明日〜