css3旋转倾斜3d小动画

lixiaoxing 2021-08-13 原文

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css3旋转动画</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		html,body{height:100%;}
		body{background: radial-gradient(circle at center,  #34679a 0%,#214163 47%,#0d1926 100%);}
		.con{width:300px;height:300px;margin:0 auto;position:relative;margin:0 auto;}
		.con .box{transform-style: preserve-3d; width:200px;height:200px;border:1px solid #fff;border-radius:50%;-webkit-transform:rotateX(-80deg) rotateY(20deg);position:absolute;left:0;top:0;}
		.con .box2{-webkit-transform:rotateX(80deg) rotateY(20deg);}
		.con .box3{-webkit-transform:rotateX(-70deg) rotateY(60deg);}
		.con .box4{-webkit-transform:rotateX(70deg) rotateY(60deg);}
		.center{-webkit-animation:centerGo 2s infinite linear;width:40px;height:40px;background:#fff;position:absolute;left:81px;top:82px;border-radius:50%;box-shadow:0 0 20px #fff;}
		@-webkit-keyframes centerGo{
			0%{
				box-shadow:0 0 0 transparent;
			}
			50%{
				box-shadow:0 0 20px #fff;
			}
			100%{
				box-shadow:0 0 0 transparent;
			}
		
		}
		.box .point{animation:point 2s infinite linear;width:200px;height:200px;position:relative;transform-style: preserve-3d;}
		.point:after{animation:pointAfter 2s infinite linear;content:"";width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;position:absolute;left:24%;top:13px;z-index:999;}
		
		.box2 .point,.box2 .point:after{-webkit-animation-delay:-.5s;}
		.box3 .point,.box3 .point:after{-webkit-animation-delay:-1.5s;}
		.box4 .point,.box4 .point:after{-webkit-animation-delay:-2s;}
		@-webkit-keyframes point{
			from{
				transform:rotateZ(0deg);
			}to{
				transform:rotateZ(360deg);
			}
		
		}
		@-webkit-keyframes pointAfter{
			from {
				-webkit-transform: rotateX(90deg) rotateY(0deg); 
				transform: rotateX(90deg) rotateY(0deg); 
			} to {
			  -webkit-transform: rotateX(90deg) rotateY(-360deg);  
				transform: rotateX(90deg) rotateY(-360deg); 
			} 
		}
		
	</style>
</head>
<body>
	<div class="con">
		<div class="center"></div>
		<div class="box box1">
			<div class="point"></div>
		</div>
		<div class="box box2">
			<div class="point"></div>
		</div>
		<div class="box box3">
			<div class="point"></div>
		</div>
		<div class="box box4">
			<div class="point"></div>
		</div>
	</div>
</body>
</html>