トップぺージの一番上に表示させている記事（新着記事）に
- 新着記事と分かるように＼New Articles／の見出しを表示
- さらに点滅させたい
と思いカスタマイズを行いました。
CSSだけで点滅させてみる
DEMO
こんな感じのイメージです
See the Pen 文字を点滅させる by はっちゃん (@hacchan) on CodePen.
文字を点滅させるためのコード
HTML
記事作成画面（HTMLモード）で
<h2 class="blink">点滅させたい見出しをここに入れる</h2>HTMLの補足
- 点滅させる文字をタグで囲みます
- タグにクラス（class=”blink”）を追加
classについて
タグについて
<h2>の部分（タグ）は用途に合わせて<div><p><span><など使い分けてください。（閉じタグには”/”を忘れず）
| タグ | 説明 |
|---|---|
| <div> | division（仕切り） 汎用ブロック要素。 前後に改行が入ります。 ひとつのまとまりとして考えます。 |
| <p> | paragragh（段落） ブロック要素。 前後に改行が入ります。 段落を指定する時に使います。 |
| <span> | 汎用インライン要素。 前後に改行が入りません。 文字の部分的な装飾などに使います。 |
CSS
こちらが点滅させるためのCSS。
/* 点滅 */
.blink {
-webkit-animation: blink 1s ease-in-out infinite alternate;
animation: blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}CSSの補足
CSSでアニメーションを表現するには2つの設定が必要となります。
- 1つ目は@keyframes
- アニメーション開始時の状態と終了時の状態を設定する
- もうひとつはanimationプロパティ
- 詳細を設定する
@keyframesについて
@keyframesは波カッコ内に要素の形状を記載します。@keyframesのあとに任意の名前を設定することで、次に書くanimationプロパティに紐づけします。
- 0%がアニメーション開始時
- 100%がアニメーション終了時となります。
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}animationのプロパティ
- animation-name … アニメーション名
- animation-duration … アニメーション1回分の時間の長さ（初期値は「0」）
- animation-timing-function … アニメーションの動き方（初期値は「ease」）
- animation-delay … アニメーションが何秒目から開始するか（初期値は「0」）
- animation-iteration-count … 繰り返す回数（初期値は「1」）
- animation-direction … 反転再生するかどうか（初期値は「normal」）
animationではこれらのプロパティを一括指定して下記のように表記することができます。
ベンダープレフィックス
先頭にある「-webkit-」については、CSSの新しいプロパティに付けて、記述したプロパティが拡張機能であることをブラウザに示すために使われる識別子です。
ブラウザによって使い分けます。
-moz- …… Firefox
-webkit- …… Google Chrome、Safari
-o- …… Opera
-ms- …… Internet Explorer
点滅させたいとき
一度CSSを設定しておくと、
例えば、ここを点滅させたいな！
と思ったときに記事作成画面（HTMLモード）でこのコードを追加するだけでいつでもどこでもピカピカ(笑)
<span class="blink">ここを点滅させたいな！</span>コピペで簡単なのでやってみてください♪
参考にさせていただいたサイト
今回、参考にさせていただいたのはこちらのサイト。コードも公開されています。
コメント