您的位置：首页 > Web前端 > CSS

纯css3实现图片切换

2016-02-16 18:29 567 查看 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS实现图片切换</title>
<style>
*{margin:0; padding:0;}
li{ list-style:none;}
/*首先是对无序列表进行样式设置*/
.slideshow ,.slideshow:after{
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;;
z-index:0;
}
.slideshow:after{
content:'';
background:transparent url(images/pattern.png) repeat top left;
}
/*将span的width和height占满整个视图，并将span里面的文字变为不可见，直接用transprant*/
/*设置opacity:0;之后我们通过在动画中去改变这个值*/
.slideshow li span{
width:100%; height:100%;
position:absolute;
top:0px; left:0px;
color:transparent;
background-size:cover;
background-position:50% 50%;
background-repeat:no-repeat;
opacity:0;
z-index:0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 18s linear infinite 0s;
-moz-animation: imageAnimation 18s linear infinite 0s;
-o-animation: imageAnimation 18s linear infinite 0s;
-ms-animation: imageAnimation 18s linear infinite 0s;
animation: imageAnimation 18s linear infinite 0s;
}

.slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #74BDEA;
-webkit-animation: titleAnimation 18s linear infinite 0s;
-moz-animation: titleAnimation 18s linear infinite 0s;
-o-animation: titleAnimation 18s linear infinite 0s;
-ms-animation: titleAnimation 18s linear infinite 0s;
animation: titleAnimation 18s linear infinite 0s;
}
.slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
/*接下来将定义所有span的背景图片和动画的延迟，所以每一个滑动的图片和title出现在上一个出现之后的6秒*/
.slideshow li:nth-child(1) span {
background-image: url(http://img.51bzzj.com/upload/1024x768/1201/11145412462.jpg);
}
.slideshow li:nth-child(2) span {
background-image: url(http://pic15.nipic.com/20110702/7557282_141243310105_2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) span {
background-image: url(http://cc1.cache.cdqss.com/attachments/month_1011/10111116357db00e1d9d39eea3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
/*设置图片动画关键帧*/
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
50% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
50% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
50% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
50% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
50% { opacity: 0 }
100% { opacity: 0 }
}
/*设置文字动画关键帧*/
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
35% { opacity: 0 }
100% { opacity: 0 }
}
/*有些浏览器不支持animation的，我们将会简单的展示最后一张图片*/
.no-cssanimation .slideshow li span{opacity:1;}
/*设置不同分辨率时title的字体大小*/
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
</style>
</head>
<body>
<ul class="slideshow">
<li>
<span>imiage 1</span>
<div>
<h3>the first image</h3>
</div>
</li>
<li>
<span>image 2</span>
<div>
<h3>this is the second</h3>
</div>
</li>
<li>
<span>image 3</span>
<div>
<h3>the third</h3>
</div>
</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航