★ ＣＳＳ３ リンク文字色の色の変化
● 条件
① ＣＳＳ３はＩＥ８やＩＥ7では機能しないので注意してください。
② この記事での説明は、現在の各ブラウザでの最新バージョンでの状態でテストしています。
③ ブラウザは下記
CSS3 Firefox etc. ・・・ 本来のＣＳＳ３
Firefox(old Ver) mozilla ・・・ Firefoxの古いバーション
Safari and Chrome ・・・ サファリ、クロームの最新バージョン
Opera ・・・ オペラの最新バージョン
IE9 IE10 ・・・ 私のＰＣには入れていないので確認できない。
● プレフィックス（頭につきます）
なし ・・・ ＣＳＳ３（現在 FireFox 16.0.2 ではこれが適用されています)
-moz- ・・・ Firefox
-webkit- ・・・ Safari Google Chrome
-o- ・・・ Opera
-ms- ・・・ Internet Explorer
● この記事で紹介するＣＳＳ３の機能
① リンク文字にカーソルを乗せると色が変化します。
② linkcolor_ani1 をアニメーションの名前としてつけています。
名前は、自由につけてＯＫです。
名前を変える場合は、該当する名前をすべて変えてください。
③ 色は自由に変えてください。
④ パーセント(%)は 0～100% で指定できます。
⑤ 私のブログにこの機能はつけていますので、リンク文字に
カーソルを合わせて確認してください
テストテストテストテストテストテスト
● やり方
① 下記をＣＳＳの一番下に追加します。
/* --------------------------------------------------------- */
/* リンク文字 ＣＳＳ３ アニメーション (linkcolor_ani1) */
/* --------------------------------------------------------- */
a:hover{
text-decoration:none; /* アンダーラインなし（アンダーラインを表示したい場合はこの行を削除） */
-moz-animation: linkcolor_ani1 3s ease-out -3s infinite alternate;/* Firefox(old Ver) mozilla */
-webkit-animation:linkcolor_ani1 3s ease-out -3s infinite alternate;/* Safari and Chrome */
-o-animation: linkcolor_ani1 3s ease-out -3s infinite alternate;/* Opera */
-ms-animation: linkcolor_ani1 3s ease-out -3s infinite alternate;/* IE9 IE10 */
animation: linkcolor_ani1 3s ease-out -3s infinite alternate;/* CSS3 Firefox etc. */
}
@-moz-keyframes linkcolor_ani1{ /* Firefox(old Ver) mozilla */
0% {color:#ffffff;}
10% {color:#00ff00;}
20% {color:#00ffff;}
30% {color:#0000ff;}
40% {color:#ffff00;}
50% {color:#ff00ff;}
60% {color:#aaaaaa;}
70% {color:#ffccff;}
80% {color:#00cc00;}
90% {color:#00cccc;}
100% {color:#ff0000;}
}
@-webkit-keyframes linkcolor_ani1{ /* Safari and Chrome */
0% {color:#ffffff;}
10% {color:#00ff00;}
20% {color:#00ffff;}
30% {color:#0000ff;}
40% {color:#ffff00;}
50% {color:#ff00ff;}
60% {color:#aaaaaa;}
70% {color:#ffccff;}
80% {color:#00cc00;}
90% {color:#00cccc;}
100% {color:#ff0000;}
}
@-o-keyframes linkcolor_ani1{ /* Opera */
0% {color:#ffffff;}
10% {color:#00ff00;}
20% {color:#00ffff;}
30% {color:#0000ff;}
40% {color:#ffff00;}
50% {color:#ff00ff;}
60% {color:#aaaaaa;}
70% {color:#ffccff;}
80% {color:#00cc00;}
90% {color:#00cccc;}
100% {color:#ff0000;}
}
@-ms-keyframes linkcolor_ani1{ /* IE9 and IE10 */
0% {color:#ffffff;}
10% {color:#00ff00;}
20% {color:#00ffff;}
30% {color:#0000ff;}
40% {color:#ffff00;}
50% {color:#ff00ff;}
60% {color:#aaaaaa;}
70% {color:#ffccff;}
80% {color:#00cc00;}
90% {color:#00cccc;}
100% {color:#ff0000;}
}
@keyframes linkcolor_ani1 { /* CSS3 Firefox etc. */
0% {color:#ffffff;}
10% {color:#00ff00;}
20% {color:#00ffff;}
30% {color:#0000ff;}
40% {color:#ffff00;}
50% {color:#ff00ff;}
60% {color:#aaaaaa;}
70% {color:#ffccff;}
80% {color:#00cc00;}
90% {color:#00cccc;}
100% {color:#ff0000;}
}
/* ------------------- End linkcolor_ani1 ---------------- */