用CSS实现一个简单的幻灯片效果页面
yezi 2019-06-20
用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%”一定不能把百分号省略！
以下为完整代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.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;}
}
</style>
</head>
<body>
<div class="myDiv"></div>
</body>
</html> 
相关推荐
80437916 0喜欢 / 0评论 2020-05-11
VanTYS 0喜欢 / 0评论 2020-05-07
山水一方 0喜欢 / 0评论 2020-02-03
zhangpeng 0喜欢 / 0评论 2014-01-10
yFifhting 0喜欢 / 0评论 2014-01-16
小肖 0喜欢 / 0评论 2016-12-26
82413161 0喜欢 / 0评论 2017-09-02
89384498 0喜欢 / 0评论 2016-12-20
80236832 0喜欢 / 0评论 2016-03-19
combine 0喜欢 / 0评论 2015-08-17
chenyanyan 0喜欢 / 0评论 2013-06-14
luohnoyo 0喜欢 / 0评论 2013-02-05
嵌入式企鹅圈 0喜欢 / 0评论 2012-04-10
youyoumo 0喜欢 / 0评论 2012-03-03
IT兄弟团 0喜欢 / 0评论 2019-06-30
CodeTerminator 0喜欢 / 0评论 2017-09-02
pplxh 0喜欢 / 0评论 2016-09-07
88570299 0喜欢 / 0评论 2014-10-16
wanchaopeng 0喜欢 / 0评论 2019-06-26
lkj0 0喜欢 / 0评论 2014-01-10
有心就有方向 0喜欢 / 0评论 2014-01-16
88580793 0喜欢 / 0评论 2013-12-05
Allenyhy 0喜欢 / 0评论 2013-11-15
87493063 0喜欢 / 0评论 2013-08-24
momode 0喜欢 / 0评论 2013-04-26
Kindlecode 0喜欢 / 0评论 2013-03-04
小白的黑科技 0喜欢 / 0评论 2014-10-29
李蓝箫 0喜欢 / 0评论 2014-10-27
iamrunner 0喜欢 / 0评论 2012-08-12
lzn 0喜欢 / 0评论 2019-06-20
梦秋雨 0喜欢 / 0评论 2011-12-29
83570690 0喜欢 / 0评论 2011-11-28
AnneZhao 0喜欢 / 0评论 2011-11-27
kwenLee 0喜欢 / 0评论 2011-09-01
88284453 0喜欢 / 0评论 2011-04-09
86453967 0喜欢 / 0评论 2013-05-09
凉白开 0喜欢 / 0评论 2012-05-22
源码在手 0喜欢 / 0评论 2012-03-09
源码佳人 0喜欢 / 0评论 2012-02-19
TensorFlowNews 0喜欢 / 0评论 2019-03-25
yoyoshadow 0喜欢 / 0评论 2019-01-21
wjsgtxy 0喜欢 / 0评论 2016-09-05
zhongguomin 0喜欢 / 0评论 2018-09-26
88491874 0喜欢 / 0评论 2017-01-14
86443468 0喜欢 / 0评论 2016-08-10
Clarence 0喜欢 / 0评论 2016-01-29