时间戳

首页 > 技术文章 > CSS3,3D效果轮播图

CSS3,3D效果轮播图

yang-ting 2017-06-29 08:27 原文

---恢复内容开始---

大家还记得我昨天的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="#" id="prev"><</a>
			<div id="imgs">
				<img src="img/img1.jpg" alt="" class="show" />
				<img src="img/img2.jpg" alt="" />
				<img src="img/img3.jpg" alt="" />
				<img src="img/img4.jpg" alt="" />
				<img src="img/img5.jpg" alt="" />
			</div>
			<!--下一页-->
			<a href="#" id="next">></a>
		</div>
	</body>
</html>

　　不知道你们学会了吗???很简单哦!

---恢复内容结束---

推荐阅读