生活随笔
收集整理的這篇文章主要介紹了
CSS 之动态变换背景颜色
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先上效果圖
HTML代碼：
1
2
3
4
5
6
7
8
9
|
<div class="header">
<h1>GCCHRN'S BLOG</h1>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">首頁</a></li>
<li role="presentation"><a href="#">分類</a></li>
<li role="presentation"><a href="#">歸檔</a></li>
<li role="presentation"><a href="#">關于</a></li>
</ul>
</div>
|
CSS代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21大專欄 CSS 之動態變換背景顏色pan>
22
23
24
25
26
27
28
29
30
31
32
|
<style type="text/css">
.header{
padding: 40px 30px 60px 30px;
text-align: center;
animation:mymove 5s infinite; /*animation 時間 播放次數*/
animation-direction:alternate; /*是否循環交替反向播放動畫*/
/*Safari 和 Chrome:*/
-webkit-animation:mymove 5s infinite;
}
@keyframes mymove
{
0% {background:#87CEFF;}
25% {background:#54FF9F;}
50% {background:#7CCD7C;}
75% {background:#63B8FF;}
100% {background:#00FFFF;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
0% {background:#87CEFF;}
25% {background:#54FF9F;}
50% {background:#7CCD7C;}
75% {background:#63B8FF;}
100% {background:#00FFFF;}
}
</style>
|
才發現我如此喜歡前端，
特別是對這種動態效果，
特別喜歡，
無法抗拒，
這僅僅是開始而已，
主要還是記錄下來給自己看的，
然后一點一點進步，
讓進步看得見！
總結
以上是生活随笔為你收集整理的CSS 之动态变换背景颜色的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
