css制作旋转的太极

最新推荐文章于 2024-06-12 17:40:56 发布

转载最新推荐文章于 2024-06-12 17:40:56 发布 · 151 阅读

效果如图：
<style type="text/css">
#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
    -webkit-animation: circle 3s infinite linear;
    /*匀速 循环*/
}
 
@-webkit-keyframes circle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
 
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
 
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
</style>
<div id="yin-yang"></div>