[分享]css3怎么画旋转太极

在CSS3中，我们可以使用transform属性来实现各种形状的旋转效果。下面我们来看一下如何使用CSS3绘制太极图：/ 设置太极图的样式 / taiji { : relative; width: 3...

在CSS3中，我们可以使用transform属性来实现各种形状的旋转效果。下面我们来看一下如何使用CSS3绘制太极图：

/* 设置太极图的样式 */
#taiji {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}
#taiji:before, #taiji:after {
    content: ';
    display: block;
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 150px;
    background-color: #000;
}
#taiji:before {
    top: 0;
    left: 0;
}
#taiji:after {
    bottom: 0;
    right: 0;
    background-color: #fff;
}
#taiji div {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 100px;
}
#taiji .yin {
    top: 0;
    left: 50px;
    background-color: #000;
}
#taiji .yang {
    bottom: 0;
    left: 50px;
    background-color: #fff;
}

/* 实现旋转效果 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
#taiji {
    animation: spin 10s linear infinite;
} 

以上代码实现了一个太极图的效果。首先，我们用一个div容器来包含太极图，将其设置为relative定位。然后，我们用:before和:after伪元素分别实现了黑白两个半圆。接下来，我们用一个div容器来分别实现黑白两个小圆，并给它们分别设置为.yin和.yang类。最后，我们使用@keyframes定义了一个旋转动画，将它设置到太极图的容器上，就可以在页面上看到旋转的太极图了。

总的来说，CSS3为我们带来了很多好玩的特效，让我们的网页更加生动有趣。掌握好它的使用方法，创造出更加精美的设计，让网页更加迷人！