[分享]css3怎么画行星

CSS3是现代web开发中常用的技术之一，可以用来实现许多惊艳的动效，今天我们来学习一下如何用CSS3画行星。

.planet{
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(#fff, #ccc), 
                radial-gradient(circle at 20% 40%, #fff, #000);
    background-blend-mode: screen;
    animation: planet-rotate 20s linear infinite;
}

.planet::before{
    content: "";
    position: absolute;
    top: 40px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #ff6600, #ff***0);
}

.planet::after{
    content: "";
    position: absolute;
    top: -60px;
    left: -30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,0,0.8), rgba(255,255,0,0));
    box-shadow: inset 10px 10px 0 0 rgba(255,255,0,0.5);
}

@keyframes planet-rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(1turn);}
} 

代码中，我们首先定义了一个圆形元素.planet，它的背景色使用了两层渐变，一层是从白色到灰色的线性渐变，用于形成行星的底色；另一层是从中心圆点开始，由白色到黑色的径向渐变，用于形成行星的云层。其中，background-blend-mode：screen;的意思是将两层渐变进行混合，产生更加真实的效果。

接下来，我们使用::before和::after伪元素，分别表示行星上的小卫星和行星的光晕。这两个元素同样利用径向渐变来实现颜色的渲染，并在容器上使用position：relative来定位它们的位置。

最后，使用@keyframes定义一个动画，产生行星自转的效果。在动画中我们使用transform：rotate来实现元素的旋转，注明了旋转的起始值和终止值，以及动画的播放方式。

运用以上代码，我们就能成功地画出一个真实的行星效果。CSS3真是个神奇的技术啊！