Sassでネオンアニメーション
5871 ワード
Sassでネオンが光って見えるアニメーションを作りました。
ちょい重いので使い所が限られます。
<div class="neon">text shadow<br>NEON EFFECT<br></div>
$color_white: #fff7fb;
$color_black: #010000;
$color_red: #f08;
.neon {
font-size: 50px;
line-height: 1.2;
text-align: center;
color: $color_white;
font-family: "Vibur", sans-serif;
animation: neon 1s infinite alternate;
@keyframes neon {
0% {
text-shadow: 0 0 0.02em $color_white, 0 0 0.04em $color_white,
0 0 0.06em $color_white, 0 0 0.1em $color_red, 0 0 0.4em $color_red,
0 0 0.5em $color_red, 0 0 0.7em $color_red, 0 0 0.8em $color_red;
}
100% {
text-shadow: 0 0 0.04em $color_white, 0 0 0.08em $color_white,
0 0 0.1em $color_white, 0 0 0.3em $color_red, 0 0 0.5em $color_red,
0 0 0.6em $color_red, 0 0 0.8em $color_red, 0 0 1em $color_red;
}
}
}
Author And Source
この問題について(Sassでネオンアニメーション), 我々は、より多くの情報をここで見つけました https://zenn.dev/hryk_n/articles/c4833473b1a8c6著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol