CSS特效003：太阳、地球、月球之间的绕转动画

た入场券 2024-02-19 09:18 36阅读 0赞

GPT能够很好的应用到我们的代码开发中，能够提高开发速度。你可以利用其代码，做出一定的更改，然后实现效能。

css实战中，这种球体间的旋转，主要通过rotate()旋转函数来实现。实际上，蓝色的地球和黑色的月球并没有发生旋转，只是其父级旋转形成的视觉上的旋转效果

### 效果图 ###

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

### 源代码 ###

/*
    * @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）
    * @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。
    * @Email: 2909222303@qq.com
    * @weixin: gis-dajianshi
    * @First published in CSDN
    * @First published time: 2023-11-09
    */
    <template>
    	<div class="container">
    		<div class="top">
    			<h3>太阳、地球、月球的旋转</h3>
    			<div class="author">大剑师兰特, 还是大剑师兰特，gis-dajianshi</div>
    		</div>
    		<div class="box">
    			<div class="sunline">
    				<div class="sun"></div>
    				<div class="earthline">
    					<div class="earth"></div>
    					<div class="moon"></div>
    				</div>
    			</div>
    		</div>
    
    	</div>
    </template>
    
    <style scoped>
    	.container {
        
    		width: 1000px;
    		height: 580px;
    		margin: 50px auto;
    		border: 1px solid green;
    		position: relative;
    	}
    
    	.top {
        
    		margin: 0 auto 0px;
    		padding: 10px 0;
    		background: mediumvioletred;
    		color: #fff;
    	}
    
    	.box {
        
    		-webkit-transform: scale(0.5);
    		transform: scale(0.5);
    		position: relative;
    		padding: 1px;
    		height: 300px;
    		width: 300px;
    		margin-left: 200px;
    	}
    
    	.sunline {
        
    		position: relative;
    		height: 400px;
    		width: 400px;
    		border: 2px solid black;
    		border-radius: 50%;
    		margin: 50px 0 0 50px;
    		-webkit-animation: rotate 10s infinite linear;
    		animation: rotate 10s infinite linear;
    	}
    
    	.sun {
        
    		height: 100px;
    		width: 100px;
    		margin: 50% 50%;
    		-webkit-transform: translate(-50%, -50%);
    		transform: translate(-50%, -50%);
    		background-color: red;
    		border-radius: 50%;
    		-webkit-box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
    		box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;
    	}
    
    	.earthline {
        
    		position: absolute;
    		right: 0;
    		top: 50%;
    		height: 200px;
    		width: 200px;
    		margin: -100px -100px 0 0;
    		border: 1px solid black;
    		border-radius: 50%;
    		-webkit-animation: rotate 2s infinite linear;
    		animation: rotate 2s infinite linear;
    	}
    
    	.earth {
        
    		margin: 50% 50%;
    		-webkit-transform: translate(-50%, -50%);
    		transform: translate(-50%, -50%);
    		height: 50px;
    		width: 50px;
    		background-color: blue;
    		border-radius: 50%;
    	}
    
    	.moon {
        
    		position: absolute;
    		left: 0;
    		top: 50%;
    		height: 20px;
    		width: 20px;
    		margin: -10px 0 0 -10px;
    		background-color: black;
    		border-radius: 50%;
    	}
    
    	@-webkit-keyframes rotate {
        
    		100% {
        
    			-webkit-transform: rotate(360deg);
    		}
    	}
    
    	@keyframes rotate {
        
    		100% {
        
    			transform: rotate(360deg);
    		}
    	}
    </style>

[7b7afa4a10ba459781c4e969a2531d0e.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/984c5772dd6f4e66a8b3ee78539a849c.png