zoukankan      html  css  js  c++  java
  • 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 {
    				 600px;
    				height: 400px;
    				position: relative;
    				margin: 30px auto;
    			}
    			
    			/*按钮*/
    			
    			#prev,
    			#next {
    				 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 {
    				 600px;
    				height: 400px;
    				position: relative;
    				-webkit-transform-style: preserve-3d;
    				-webkit-perspective: 1000px;
    			}
    			/*图片*/
    			#imgs img {
    				 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>
    

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

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

  • 相关阅读:
    网站并发量的计算方法
    Kubernetes-1.16部署之一 ETCD+K8s+Calico
    CentOS 7和Ubuntu 18.04安装Docker
    Tomcat8的kryo序列化方式session共享
    Tomcat启动慢问题解决
    Memcached集群配置
    sed命令使用方法
    python数据分析与算法之五 算法
    python数据分析与算法之四 二叉树和排序二叉树
    python数据分析与算法之三 顺序表和链表
  • 原文地址:https://www.cnblogs.com/yang-ting/p/7092539.html
Copyright © 2011-2022 走看看