html动画完成一个环形的照片墙加背景音乐

旧城等待， 2021-09-15 15:00 330阅读 0赞

思路：大致就是让所有盒子绝对定位，然后给每一个盒子设置动画，让其盒子沿y轴方向旋转，并且向z轴移动，盒子之间的动画需要有一定的延迟时间，让所有盒子旋转到一定位置时，让其父级进行关于y轴的旋转

![70][]

![70 1][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>环形</title>
    	<style type="text/css">
    	@keyframes run1{
    		from{
    			transform: rotateY(0deg) translateZ(0px);
    		}
    		to{
    			transform: rotateY(60deg) translateZ(300px);
    		}
    	}
    		@keyframes run2{
    		from{
    			transform: rotateY(0deg) translateZ(0px);
    		}
    		to{
    			transform: rotateY(120deg) translateZ(300px);
    		}
    	}
    		@keyframes run3{
    		from{
    			transform: rotateY(0deg) translateZ(0px);
    		}
    		to{
    			transform: rotateY(180deg) translateZ(300px);
    		}
    	}
    		@keyframes run4{
    		from{
    			transform: rotateY(0deg) translateZ(0px);
    		}
    		to{
    			transform: rotateY(240deg) translateZ(300px);
    		}
    	}
    		@keyframes run5{
    		from{
    			transform: rotateY(0deg) translateZ(0px);
    		}
    		to{
    			transform: rotateY(300deg) translateZ(300px);
    		}
    	}
    		@keyframes run6{
    		from{
    			transform: rotateY(0deg) translateZ(0px);
    		}
    		to{
    			transform: rotateY(360deg) translateZ(300px);
    		}
    	}
            @keyframes run{
    		from{
    			transform: rotateY(0deg) ;
    		}
    		to{
    			transform: rotateY(360deg);
    		}
    	}
    	
    	body{
    	    width:100%;
            -webkit-transform-style: preserve-3d;
    		perspective: 2000px;
    		background:black;
    	}
    		.wrap{
    			width: 120px;
    			height: 200px;		
    			margin:200px auto;
    			position: relative;
    			-webkit-transform-style: preserve-3d;
    	        animation:run 5s 2s infinite linear;
    		}
    		.box{
    			position: absolute;
    			left:0;
    			top:0;
    			width: 100%;
    			height: 100%;
    			background: red;
    			opacity: 0.5;    
    			box-shadow: 0px 10px 100px #CCFF66;
    			
    		}
    		.box:nth-child(1){
    			animation: run1 1s linear forwards;
    		
    
    		}
    		.box:nth-child(2){
    		animation: run2 1s 0.2s linear forwards;
    		
    		}
    		.box:nth-child(3){
    				animation: run3 1s 0.4s linear forwards;
    		
    		}
    		.box:nth-child(4){
    				animation: run4 1s  0.6s linear forwards;
    			
    
    		}
    		.box:nth-child(5){
    				animation: run5 1s 0.8s linear forwards;
    	
    
    		}
    		.box:nth-child(6){
    				animation: run6 1s  1s linear forwards;
    	
    
    		}
    		/*.wrap:hover .box:nth-child(1){
    	        -webkit-transform: translateZ(300px);
    			background: green;
    			
    
    		}
    		.wrap:hover .box:nth-child(2){
    	        -webkit-transform: rotateY(60deg) translateZ(300px);
    			background: black;
    			
    		}
    		.wrap:hover .box:nth-child(3){
    	        -webkit-transform: rotateY(120deg) translateZ(300px);
    			background:blue;
    			
    		}
    		.wrap:hover .box:nth-child(4){
    	        -webkit-transform: rotateY(180deg)  translateZ(300px);
    			background:yellow;
    			
    		}
    		.wrap:hover .box:nth-child(5){
    	        -webkit-transform: rotateY(240deg) translateZ(300px);
    			background:pink;
    		
    		}
    		.wrap:hover .box:nth-child(6){
    	        -webkit-transform: rotateY(300deg) translateZ(300px);
    			background:purple;
    			
    		}
    		.wrap:hover{
    	        -webkit-transform: rotateX(-15deg) rotateY(360deg);
    			-webkit-transition: 10s 3.5s;
    		}*/
    		img{
    			height: 100%;
    			width: 100%;
    			object-fit: cover;
    
    		}
    		embed{
    			width: 0;
    			height: 0;
    		}
    
    	</style>
    
    </head>
    <body>
    	<embed loop   src="./1.mp3"></embed>
    	<div class="wrap">
    	
    		<div class="box">
    			<img src="./1.jpeg" alt="">
    		</div>
    		<div class="box">
    				<img src="./2.jpeg" alt="">
    		</div>
    		<div class="box">
    				<img src="./3.jpeg" alt="">
    		</div>
    		<div class="box">
    				<img src="./4.jpeg" alt="">
    		</div>
    		<div class="box">
    				<img src="./5.jpeg" alt="">
    		</div>
    		<div class="box">
    				<img src="./6.jpeg" alt="">
    		</div>
    	</div>
    
    	
    </body>
    </html>

[70]: /images/20210813/c5765e866f6e4eafb64b490dbfdc86cd.png
[70 1]: /images/20210813/959581e3e27c4da6aa6119b4dc9ec571.png