聊代碼（第五十集）css樣式（之二十）
從本集開始，我們討論用代碼通過css樣式制作動畫。下面，是二圖切換，具有漸隱漸現(xiàn)的效果，同時，由于加入了 infinite 代碼，使圖片切換循環(huán)進行而不中止，見下圖。
海特行者歡迎你！
代碼：
＜style type="text/css"＞.p { width:450px; height:350px; background-image:url(http://img4.oldkids.cn/upload/2017/09/29/blog_20170929203
720474.gif);width:630px;height:450px; animation:myfirst 30s;
-moz-animation:myfirst 30s; /* Firefox */
-webkit-animation:myfirst 30s; /* Safari and Chrome */
-o-animation:myfirst 30s; /* Opera */
-webkit-animation-iteration-count: infinite;/*定義infinite為無限次循環(huán)*/
color: #f00; font-size: 35px; }
@keyframes myfirst { from{background-image:url(http://img1.oldkids.cn/upload/260811000/u260810070/2016/
11/20/blog_20161120142853035096.gif)}
＜/style＞
＜p class="p"＞海特行者歡迎你?。?p＞
代碼解析：
infinite 無限循環(huán)，使動畫不停止。
from 動畫從這里開始。
30s 數(shù)值大，則動畫切換慢。數(shù)值小，則動畫切換快。
海 特 行 者 歡 迎 你 ！
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
