16.css3 背景色を徐々にアニメーションし変化させる Chap 5-12 Tips
学習書の「sample_a」(Chap5_1-12Tips)を表示しソースコードを見て下さい。クリックした場合、エラーとなります
ナビの背景色をアニメーション
メニューにマウスを重ねるとゆっくりと色が変化していく。教材では、色(RGB:1,122,205)、間隔1秒
をこのページでは、色(RGB:255,255,0)、間隔3秒に変えている。メニューにマウスを重ねて下さい。
CSS記述
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
nav ul li a {display: block; width: 120px; line-height: 30px; text-decoration: none; text-align: center; color: #ffffff; border-right: solid 1px rgba(255,255,255,0.2); -webkit-transition: 3s; -moz-transition: 3s; -o-transition: 3s; -ms-transition: 3s; background-color: rgba(255,255,0,0)} nav ul li a:hover{ background-color: rgba(255,255,0,0.3);} |