CSSだけで点滅させてみる

トップぺージの一番上に表示される記事に
- 新着記事(New Articles)の見出しを表示
- さらに点滅させたい
と思いカスタマイズを行いました。
カスタマイズ後
\New Articles/

やったぁ成功!イメージ通り点滅させることができました(^^)
参考にさせていただいたサイト
今回、参考にさせていただいたのはこちらのサイト。コピペできるコードが公開されているのでお借りしました(^^)
HTML
ここで点滅させる文字とクラス(class=”blinking”)を設定します。
<span class="blinking">点滅させたいテキストをここに入れる</span>
CSS
こちらが点滅させるためのCSS。
/* 点滅 */
.blinking{
-webkit-animation:blink 1.5s ease-in-out infinite alternate;
-moz-animation:blink 1.5s ease-in-out infinite alternate;
animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
ワードプレス以外のブログサービスでもコピペで利用できます。
一度CSSを設定しておくと、
例えばここを点滅させたいな!
<span class=”blinking”>ここを点滅させたいな!</span>
とHTMLを入れて点滅させています。
とHTMLを入れて点滅させています。
と思ったときにクラス(class=”blinking”)を追加するだけなので簡単。参考にしてみてください♪
コメント