html页面实现ppt效果图,用CSS实现一个简单的幻灯片效果页面

用CSS实现一个简单的幻灯片效果页面，第一反应是利用CSS3的animation。不过为了兼容浏览器，记得加各浏览器前缀(“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”)，我最开始写的时候忘记加浏览器前缀，在chrome中一直没有任何显示。下面说说用到的animation各属性。

animation-name(动画名字，需用引号包裹)

animation-duration(动画持续时间，如：20s)

animaiton-iteration-count(循环次数，“infinite”为无线循环)

还有一个很重要的“keyframes(关键帧)”，书写格式为：@keyframes "动画名字"｛｝

“{}”内根据设置内容从“0%”到“100%”依次编写，注意“0%”一定不能把百分号省略！

以下为完整代码：

.myDiv {

width: 600px;

height: 400px;

margin: 20px auto;

background-size: over;

background-position: center;

-webkit-animation-name: 'loop';

-webkit-animation-duration: 20s;

-webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes "loop"{

0% {background: url(http://img5.duitang.com/uploads/blog/201408/12/20140812150016_8NMUU.jpeg) no-repeat;}

25% {background: url(http://pic29.nipic.com/20130518/9908282_142904524164_2.jpg) no-repeat;}

50% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114503719.jpg) no-repeat;}

75% {background: url(http://img3.redocn.com/20100322/Redocn_2010032112222793.jpg) no-repeat;}

100% {background: url(http://uploadfile.huiyi8.com/2014/0605/20140605114447934.jpg) no-repeat;}

}