ご訪問ありがとうございます^^
茨城・千葉・宮城エリアの釣り(ファミリーフィッシング)をメインとしたブログです。
少しブログに関することも書いています。

全記事一覧はこちら >>

CSSでテキストを点滅させるカスタマイズ

文字を点滅 カスタマイズ

CSSだけで点滅させてみる

トップぺージの一番上に表示される記事に

  1. 新着記事(New Articles)の見出しを表示
  2. さらに点滅させたい

と思いカスタマイズを行いました。

カスタマイズ後

\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を入れて点滅させています。

と思ったときにクラス(class=”blinking”)を追加するだけなので簡単。参考にしてみてください♪

コメント