css3+js 旋转木马轮播特效

偏执的太偏执、 2022-12-13 11:20 237阅读 0赞

<!DOCTYPE html>
    <html lang="zh">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<meta http-equiv="X-UA-Compatible" content="ie=edge">
    		<title></title>
    		<style>
    			* { 
    		  margin: 0;
    		  padding: 0;
    		}
    		.carousel { 
    		  height: 250px;
    		  overflow: hidden;
    		  display: flex;
    		  background: #111;
    		  perspective: 1000px;
    		  transform-style: preserve-3d;
    		}
    		
    		#drag-container, #spin-container { 
    		  position: relative;
    		  display: flex;
    		  margin: auto;
    		  transform-style: preserve-3d;
    		  transform: rotateX(-10deg);
    		}
    		#drag-container img { 
    		  transform-style: preserve-3d;
    		  position: absolute;
    		  left: 0;
    		  top: 0;
    		  width: 100%;
    		  height: 80%;
    		  /* line-height: 200px; */
    		  /* font-size: 50px; */
    		  font-size: 25px;
    		  text-align: center;
    		  box-shadow: 0 0 8px #fff;
    		  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
    		}
    		
    		#drag-container img:hover { 
    		  box-shadow: 0 0 15px #fffd;
    		  -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0007);
    		}
    		
    		 #drag-container p { 
    		  font-family: Serif;
    		  position: absolute;
    		  top: 50%;
    		  left: 50%;
    		  transform: translate(-50%,-50%);
    		  color: #fff;
    		  width: 120px;
    		  font-size: 28px;
    		  text-align: center;
    	text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #ff00de,0 0 70px #ff00de,0 0 80px #ff00de,0 0 100px #ff00de,0 0 150px #ff00de;
    	transform-style:preserve-3d;
    	-moz-transform-style:preserve-3d;
    	-webkit-transform-style:preserve-3d;
    	-ms-transform-style:preserve-3d;
    	-o-transform-style:preserve-3d;
    	animation:run  ease-in-out 9s infinite;
    	-moz-animation:run  ease-in-out 9s infinite;
    	-webkit-animation:run  ease-in-out 9s infinite;
    	-ms-animation:run  ease-in-out 9s infinite;
    	-o-animation:run  ease-in-out 9s infinite;
    		}
    		
    		#ground { 
    /* width: 100px; height: 100px; */
    		  position: absolute;
    		  top: 100%;
    		  left: 50%;
    		  transform: translate(-50%,-50%) rotateX(90deg);
    		  background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
    		  /* background-color: red; */
    		}
    		
    		#music-container { 
    		  position: absolute;
    		  top: 0;
    		  left: 0;
    		}
    		
    		
    		@keyframes spin { 
    		  from{ 
    		    transform: rotateY(0deg);
    		  } to{ 
    		    transform: rotateY(360deg);
    		  }
    		}
    		@keyframes spinRevert { 
    		  from{ 
    		    transform: rotateY(360deg);
    		  } to{ 
    		    transform: rotateY(0deg);
    		  }
    		}
    		/* 选择 */
    		@keyframes run { 
    			0% { 
    			transform:rotateX(-5deg) rotateY(0);
    		}
    		50% { 
    			transform:rotateX(0) rotateY(180deg);
    			text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #3EFF3E,0 0 70px #3EFFff,0 0 80px #3EFFff,0 0 100px #3EFFee,0 0 150px #3EFFee;
    		}
    		100% { 
    			transform:rotateX(5deg) rotateY(360deg);
    		}
    		}@-moz-keyframes run { 
    			0% { 
    			-moz-transform:rotateX(-5deg) rotateY(0);
    		}
    		50% { 
    			-moz-transform:rotateX(0) rotateY(180deg);
    			text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #3EFF3E,0 0 70px #3EFFff,0 0 80px #3EFFff,0 0 100px #3EFFee,0 0 150px #3EFFee;
    		}
    		100% { 
    			-moz-transform:rotateX(5deg) rotateY(360deg);
    		}
    		}@-webkit-keyframes run { 
    			0% { 
    			-webkit-transform:rotateX(-5deg) rotateY(0);
    		}
    		50% { 
    			-webkit-transform:rotateX(0) rotateY(180deg);
    			text-shadow:1px  1px 1px #ccc,0 0 10px #fff,0 0 20px #fff,0 0 30px #fff,0 0 40px #3EFF3E,0 0 70px #3EFFff,0 0 80px #3EFFff,0 0 100px #3EFFee,0 0 150px #3EFFee;
    		}
    		100% { 
    			-webkit-transform:rotateX(5deg) rotateY(360deg);
    		}
    		}@-ms-keyframes run { 
    			0% { 
    			-ms-transform:rotateX(-5deg) rotateY(0);
    		}
    		50% { 
    			-ms-transform:rotateX(0) rotateY(180deg);
    		}
    		100% { 
    			-ms-transform:rotateX(5deg) rotateY(360deg);
    		}
    		}
    	</style>
    	</head>
    	<body>
    		<div class="carousel">
    			<div id="drag-container">
    				<div id="spin-container">
    					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
    					 alt="">
    					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
    					 alt="">
    					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
    					 alt="">
    					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
    					 alt="">
    					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
    					 alt="">
    					<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602347249498&di=34cab18b5627fa3b26b0817d84a0b91b&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F6%2F57a2ea807f7ad.jpg"
    					 alt="">
    					<p>沐歌</p>
    				</div>
    				<div id="ground"></div>
    			</div>
    			<div id="music-container"></div>
    		</div>
    		<script type="text/javascript">
    			const carousel = () => { 
        //变量的定义
        let radius = 240;
        let autoRotate = true;
        let rotateSpeed = -60;
        let imgWidth = 120;
        let imgHeight = 170;
        // ===================== start =======================
    
        let ospin = document.getElementById('spin-container');
        let aImg = ospin.getElementsByTagName('img');
        let aEle = [...aImg];
    
        ospin.style.width = imgWidth + "px";
        ospin.style.height = imgHeight + "px";
    
        const ground = document.getElementById('ground');
        ground.style.width = radius * 3 + "px";
        ground.style.height = radius * 3 + "px";
    
        function init(delayTime) { 
            for (let i = 0; i < aEle.length; i++) { 
                aEle[i].style.transform = "rotateY(" + (i * (360 / aEle.length)) + "deg) translateZ(" + radius + "px)";
                aEle[i].style.transition = "transform 1s";
                aEle[i].style.transitionDelay = delayTime || (aEle.length - i) / 4 + "s";
            }
        }
    
        if (autoRotate) { 
            let animationName = (rotateSpeed > 0 ? 'spin' : 'spinRevert');
            ospin.style.animation = `${ animationName} ${ Math.abs(rotateSpeed)}s infinite linear`;
        }
        
        init()
    
    };
    		</script>
    	</body>
    </html>

***效果如下:***

![在这里插入图片描述][20201010235927548.gif_pic_center]

[20201010235927548.gif_pic_center]: /images/20221123/a86f15b6ca1540339e97a7ab05d65c17.png