CSS3 元素转圈动画（元素旋转动画）

谁践踏了优雅 2022-11-10 01:25 220阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style type="text/css">
    			.circle {
    				width: 200px;
    				height: 200px;
    				position: absolute;
    				top: 50%;
    				left: 50%;
    				margin: -100px 0 0 -100px;
    			}
    
    			.circle1,
    			.circle2,
    			.circle3,
    			.center {
    				position: absolute;
    				left: 50%;
    				top: 50%;
    				margin: -30px 0 0 -30px;
    				width: 60px;
    				height: 60px;
    				border-radius: 30px;
    				background-color: #666666;
    			}
    
    			.center {
    				position: absolute;
    				left: 50%;
    				top: 50%;
    				margin: -35px 0 0 -35px;
    				width: 70px;
    				height: 70px;
    				border-radius: 35px;
    				background: #111111;
    				text-align: center;
    				line-height: 70px;
    				color: #EAEAEA;
    				font-size: 16px;
    			}
    
    			.circle1 {
    				-webkit-animation: circle 3s linear infinite;
    				animation: circle 3s linear infinite;
    			}
    
    			.circle2 {
    				-webkit-animation: circle 3s linear 0.8s infinite;
    				animation: circle 3s linear 0.8s infinite;
    			}
    
    			.circle3 {
    				-webkit-animation: circle 3s linear 1.6s infinite;
    				/* Safari and Chrome */
    				animation: circle 3s linear 1.6s infinite;
    			}
    
    			@-webkit-keyframes circle {
    
    				/* Safari and Chrome */
    				from {
    					opacity: 1;
    					-webkit-transform: scale(0);
    				}
    
    				to {
    					opacity: 0;
    					-webkit-transform: scale(3);
    				}
    			}
    		</style>
    	</head>
    	<body>
    		<div class="circle">
    			<div class="circle1"> </div>
    			<div class="circle2"> </div>
    			<div class="circle3"> </div>
    			<div class="center"></div>
    		</div>
    	</body>
    
    </html>