CSS3,3D效果輪播圖

時間 2019-11-09

標籤 css3 css 3d 效果欄目 CSS 简体版

原文原文鏈接

---恢復內容開始---javascript

你們還記得我昨天的3D拖拽立方體嗎??我昨天還說過css還能夠作輪播圖,因此我們今天就寫一下,css的輪播圖吧!

....這個輪播圖主要是用CSS3裏的transform的旋轉屬性來完成3D效果的,而後配合原生js的顯示隱藏,達到了3D旋轉輪播圖的效果:css

<!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>

　　不知道大家學會了嗎???很簡單哦!html

---恢復內容結束---java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。