【聊代码】第五十集 css样式（之二十）二图切换

聊代码（第五十集）css样式（之二十）

从本集开始，我们讨论用代码通过css样式制作动画。下面，是二图切换，具有渐隐渐现的效果，同时，由于加入了 infinite 代码，使图片切换循环进行而不中止，见下图。

海特行者欢迎你！

代码：

＜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为无限次循环*/

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 无限循环，使动画不停止。

from 动画从这里开始。

30s 数值大，则动画切换慢。数值小，则动画切换快。

海 特 行 者 欢 迎 你 ！