CSS3画八卦太极图（绕一个圆旋转）

最新推荐文章于 2024-03-07 17:52:03 发布

原创最新推荐文章于 2024-03-07 17:52:03 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用CSS实现的旋转动画实例，详细展示了如何通过关键帧动画使元素进行360度旋转，并利用before和after伪元素增强视觉效果。文章还涉及了定位、边框、背景颜色等CSS属性的应用。

html代码：
<div class="mydiv2">

</div>

css代码：

@-webkit-keyframes action2{ /*动画*/
100%{transform:rotate(360deg);}
}
.div2{
width: 200px;
height: 100px;
left: 200px;
background-color: #fff;
border-bottom: 100px solid #000;
border-radius: 50%;
position: relative;
transform-origin:100px 300px;
-webkit-animation:action2 3s linear 0.1s infinite;

}
.div2:before{
content: "";
width: 36px;
height: 36px;
border: 32px solid #000;
background-color: #fff;
position: absolute;
top: 50px;
border-radius: 50%;
}
.div2:after{
content: "";
width: 36px;
height: 36px;
border: 32px solid #fff;
background-color: #000;
position: absolute;
top: 50px;
left: 100px;
border-radius: 50%;
}
.mydiv2{
width: 600px;
height: 600px;
border: 1px solid #009900;
border-radius: 50%;
}