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

纯CSS实现图片轮播

2016-10-09 10:33 417 查看

原文：http://www.aichengxu.com/view/4182590

关键点：利用keyframes 原理：infinite

注意点：在处理关键帧动画的时候，注意处理好总共花费的 animation-duration：time 与每帧延延迟的时间的交错；要让动画显得层次感，处理好每帧的延迟时间；

多注意时间的穿插；效果更很好；下面只是我的小插图；画的不一定对;

以下是我的代码；有兴趣拷贝来看看，仅作为我的练习记录；关键帧要兼容其他浏览器，自行补充前缀即可；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css轮播图</title>
</head>

<body>

<style>
*{ margin:0 ; padding:0}
ul,li{ list-style:none; margin:0; padding:0;}

.box,
.box:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.box:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}
.box li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none; background-color:#333;
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;
}
.box li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-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;
}
.box li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(255,255,255,0.8);
}
.box li:nth-child(1) span { background-image: url(../images/love5.jpg) }
.box li:nth-child(2) span {
background-image: url(../images/love3.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.box li:nth-child(3) span {
background-image: url(../images/love1.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.box li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.box 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;
}
11% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-webkit-transform: scale(1.1);
}
35% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ;  -webkit-transform: scale(1.1) translateY(-100%);}
}

@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
11% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-moz-transform: scale(1.1);
}
35% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ;  -moz-transform: scale(1.1) translateY(-100%);}
}

@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
11% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
30% {
opacity: 1;
transform: scale(1.1);
}
35% {
opacity: 0;
transform: scale(1.1) translateY(-20%);
}
49% {
opacity: 0;
transform: scale(1.1) translateY(-60%);
}
100% { opacity: 0 ;  transform: scale(1.1) translateY(-100%);}
}

@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
8% {
opacity: 1;
-webkit-transform: translateY(0%);
}
22% {
opacity: 1;
-webkit-transform: translateY(0%);
}
28% {
opacity: 0;
-webkit-transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}

@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(-300%);
}
8% {
opacity: 1;
-moz-transform: translateY(0%);
}
22% {
opacity: 1;
-moz-transform: translateY(0%);
}
28% {
opacity: 0;
-moz-transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
22% {
opacity: 1;
transform: translateY(0%);
}
28% {
opacity: 0;
transform: translateY(100%);
}
35% { opacity: 0 }
100% { opacity: 0 }
}

/* Show at least something when animations not supported */
.no-cssanimations .box li span{
opacity: 1;
}

</style>
<ul class="box">
<li><span>Image 01</span><div class="title"><h3>第1张</h3></div></li>
<li><span>Image 02</span><div class="title"><h3>第2张</h3></div></li>
<li><span>Image 03</span><div class="title"><h3>第3张</h3></div></li>
</ul>

</body>
</html>

其他：
1，相同参数的可以写在一起；
2，可以只有to， 也可以只有类似50%  省略0%和100%；因为后面的会重置前面的样式；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 图片

相关文章推荐

新的分享

章节导航