CSS3实现优酷轮播图
来源：互联网 发布：做淘宝新手怎么找货源 编辑：程序博客网 时间：2024/06/08 19:28
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> 1 0
- CSS3实现优酷轮播图
- css3实现浏览器缩放
- Tab页用CSS3实现
- CSS3实现GIF进度条
- css3实现随机数字
- CSS3实现动画相册
- CSS3实现镂空文字
- CSS3实现三角框
- css3实现闪光效果
- css3实现三角形
- css3实现太极旋转
- CSS3 实现RSS图标
- css3实现简易魔方
- css3实现按钮开关效果
- CSS3实现倒影
- css3实现时钟动画
- css3实现动画横幅
- css3实现卡片翻转
- intellij idea 导出可发布的maven web 项目
- Minimum Absolute Difference in BST
- OpenCv-python之基础图像知识
- Spring Session + Redis实现分布式Session共享
- TensorFlow基础知识点（六）/矩阵基本操作
- CSS3实现优酷轮播图
- ThreadPoolExecutor的使用
- 屏幕相关的辅助类
- Maven常用命令整理
- 104-记录锁（概念）
- 简要介绍Logistic 回归
- 蓝桥杯 拦截导弹（dp 最长下降子序列）
- DWR使用指导
- ScrollView常用属性汇总
