CSSだけで、見出しなどをタイピングした様に一文字づつ表示させ、最後にカーソルを点滅させるアニメーションです。コピペで出来きます。ぜひやってみて下さい。
コードをSCSSで書きました。まだSCSSをお試し出ない方、便利ですのでCSSから脱却してみませんか?
導入方法


Visual Studio Code (VSC)とSASSの環境とコンパイル
SASSを使うなら、エディターは Visual Stidio Code (VSC)が超簡単!無料ですし、初心者でも怖がらずにインストールできるのでお勧めです!Atomよりも軽い様にも思います…
INDEX
基本形
基本の部分です。擬似クラスでカーソル部分を付けています。
h1{
font-size: 1.8rem;
overflow: hidden;
&::after {
position: relative;
top: 0.2rem;
left: 0.3rem;
display: inline-block;
height: 1.8rem;
background-color: #4697CC;
margin-left: .6rem;
width: 2px;
content: "";
}
}
アニメーション
擬似クラスの部分を透明度を設定し、チカチカする感じにしています。
h1{
animation: typing 4s steps(23);
white-space: nowrap;
overflow: hidden;
&::after {
animation: flash 1s ease infinite;
}
}
@keyframes typing {
from {
width: 0
}
to { width: 100% }
}
@keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
コメント ※ハンドルネームでお願いします