首页 > 代码库 > CSS3,3D效果轮播图
CSS3,3D效果轮播图
---恢复内容开始---
大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧!
....这个轮播图主要是用CSS3里的transform的旋转属性来完成3D效果的,然后配合原生js的显示隐藏,达到了3D旋转轮播图的效果:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>3D图片切换1</title> <style> /*设置一个关键帧*/ @-webkit-keyframes open { 0% { -webkit-transform: rotateX(180deg); opacity: 0; } 57% { -webkit-transform: rotateX(-16deg); opacity: 1; } 66% { -webkit-transform: rotateX(14deg); } 74% { -webkit-transform: rotateX(-12deg); } 81% { -webkit-transform: rotateX(10deg); } 87% { -webkit-transform: rotateX(-8deg); } 92% { -webkit-transform: rotateX(6deg); } 96% { -webkit-transform: rotateX(-4deg); } 100% { -webkit-transform: rotateX(0deg); } } @-webkit-keyframes clos { 0% { -webkit-transform: rotateX(0deg); opacity: 1; } 100% { -webkit-transform: rotateX(-180deg); opacity: 0; } } body { background: #eee; } .box { width: 600px; height: 400px; position: relative; margin: 30px auto; } /*按钮*/ #prev, #next { width: 50px; height: 50px; background: #efefef; border-radius: 25px; position: absolute; top: 100px; box-shadow: 2px 2px 10px #666; text-align: center; font-size: 40px; line-height: 50px; font-family: Verdana, Geneva, sans-serif; text-decoration: none; color: #fff; -webkit-text-stroke: 2px #ccc; } #prev { left: -100px; } #next { right: -100px; } /*图片区*/ #imgs { width: 600px; height: 400px; position: relative; -webkit-transform-style: preserve-3d; -webkit-perspective: 1000px; } /*图片*/ #imgs img { width: 600px; height: 400px; position: absolute; left: 0; top: 0; -webkit-transform-origin: bottom; -webkit-transform: rotateX(-180deg); opacity: 0; } /*设置显示和隐藏后的样式*/ #imgs .show { -webkit-animation: open 1.2s ease-in; -webkit-transform: rotateX(0deg); opacity: 1; } #imgs .hide { -webkit-animation: clos 1s ease; -webkit-transform: rotateX(-180deg); opacity: 0; } </style> <script> window.onload = function() { //要用到的元素获取元素 var oPrev = document.getElementById("prev"); var oNext = document.getElementById("next"); var aImg = document.getElementsByTagName("img"); var iNow = 0; //上一页点击事件 oPrev.onclick = function() { aImg[iNow].className = "hide"; iNow--; if(iNow < 0) { //判断全局变量 iNow = aImg.length - 1; } aImg[iNow].className = "show"; }; //下一页点击事件 oNext.onclick = function() { aImg[iNow].className = "hide"; iNow++; if(iNow == aImg.length) { // 如果全局变量和长度相等,就变回第一张,造成视觉循环的假象 iNow = 0; } aImg[iNow].className = "show"; }; } </script> </head> <body> <div class="box"> <!--上一页--> <a href="http://www.mamicode.com/#" id="prev"><</a> <div id="imgs"> <img src="http://www.mamicode.com/img/img1.jpg" class="show" /> <img src="http://www.mamicode.com/img/img2.jpg" /> <img src="http://www.mamicode.com/img/img3.jpg" /> <img src="http://www.mamicode.com/img/img4.jpg" /> <img src="http://www.mamicode.com/img/img5.jpg" /> </div> <!--下一页--> <a href="http://www.mamicode.com/#" id="next">></a> </div> </body> </html>
不知道你们学会了吗???很简单哦!
---恢复内容结束---
CSS3,3D效果轮播图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。