CSS3实现优酷轮播图
2017-03-19 18:33
120 查看
CSS3实在是强大， 复杂的动画由CSS来实现着实让人好理解， 闲话不多说直接进入正题。今天实验的不是沉浸式轮播图， 而是类似优酷的立体轮播图
一· 效果演示
二· 页面布局
页面布局同正常的轮播图一样没什么好说的。上代码.<!-- width:500px height:300px -->//我选的图片正常尺寸 <div class="wrapper"> <div class="move"> <img src="1.jpg"> </div> <div class="move"> <img src="2.jpg"> </div> <div class="move"> <img src="3.jpg"> </div> <div class="move"> <img src="4.jpg"> </div> <div class="move"> <img src="5.jpg"> </div> </div>
三· 思想说明
注意到图片到两边时height应该为0， 但是为了视觉效果图片上还是给了一些高度。
总共轮播一共5种状态， 因此一个animation属性要设置0%， 20%， 40%， 60%， 80%， 100%， 这五种状态。 但是由于开始时盒子内已经有三张起始图片因此我认为应该要写4种运动动画， 3个是开始的图片三个， 第4个动画是通用的。每一次的运动就是分别改变left， height， width， 等几种属性。
@keyframes start1 {
0% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
20% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
40% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
60% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
80% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
100% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
}
@keyframes start2 {
0% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
20% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
40% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
60% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
80% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
100% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
}
@keyframes start3 {
0% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
20% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
40% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
60% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
80% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
100% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
}
@keyframes start4 {
0% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
20% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
40% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
60% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
80% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
100% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
}四· 总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优酷轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
/* 盒子样式 */
.wrapper {
position: relative;
width: 800px;
/*500 + 200 + 200*/
height: 300px;
margin: 0 auto;
overflow: hidden;
}
.wrapper .move {
position: absolute;
top: 50%;
width: 200px;
float: left;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
.wrapper .move img {
width: 100%;
height: 100%;
}
.wrapper .move:nth-child(1) {
animation: start1 5s ease-in-out infinite;
}
.wrapper .move:nth-child(2) {
animation: start2 5s ease-in-out infinite;
}
.wrapper .move:nth-child(3) {
animation: start3 5s ease-in-out infinite;
}
.wrapper .move:nth-child(4) {
animation: start4 5s ease-in-out infinite;
}
.wrapper .move:nth-child(5) {
animation: start4 5s ease-in-out 1s infinite;
}
@keyframes start1 {
0% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
20% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
40% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
60% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
80% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
100% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
}
@keyframes start2 {
0% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
20% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
40% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
60% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
80% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
100% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
}
@keyframes start3 {
0% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
20% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
40% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
60% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
80% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
100% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
}
@keyframes start4 {
0% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
20% {
top: 50%;
margin-top: -60px;
height: 120px;
width: 200px;
left: 650px;
opacity: 0.3;
z-index: 1;
}
40% {
top:0;
margin-top:0;
height:300px;
width:500px;
left:150px;
opacity:1;
z-index:100;
}
60% {
top:50%;
margin-top:-60px;
height:120px;
width:200px;
left:0px;
opacity:0.3;
z-index:1;
}
80% {
top: 50%;
width: 200px;
opacity: 0.4;
left: -200px;
z-index: 1;
height:0px;
margin-top:0px;
}
100% {
top: 50%;
width: 200px;
opacity: 0.4;
left: 900px;
z-index: 1;
height:0px;
margin-top:0px;
}
}
</style>
</head>
<body>
<!-- width:500px height:300px -->
<div class="wrapper">
<div class="move">
<img src="1.jpg">
</div>
<div class="move">
<img src="2.jpg">
</div>
<div class="move">
<img src="3.jpg">
</div>
<div class="move">
<img src="4.jpg">
</div>
<div class="move">
<img src="5.jpg">
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android Viewpager实现图片轮播（仿优酷效果）
- +【CSS3】使用纯css代码实现图片轮播效果
- 用jQuery实现优酷首页轮播图
- 图片轮播(仿优酷剧集首页)实现(jQuery)
- CSS3实现百页窗效果轮播图
- 纯CSS3实现lightbox+图像轮播
- 纯CSS3实现轮播图
- 用jQuery实现优酷首页轮播图
- 用jQuery实现优酷首页轮播图
- 利用 CSS3 实现的无缝轮播
- 基于jquery实现的仿优酷图片轮播特效代码
- CSS3: animation实现简易幻灯片(轮播)
- CSS3: animation实现简易幻灯片(轮播)
- 关于用jQuery知识来实现优酷首页轮播图！
- 纯CSS3实现轮播切换效果
- Android Viewpager实现图片轮播（仿优酷效果）
- 纯css3实现图片轮播
- 利用CSS3实现图片无间断轮播图的实现思路
- 分别用css3、JS实现图片简单的无缝轮播功效
- 纯css3 实现3D轮播图