今天完成一个css太极八卦的css效果,用一个div实现css动画效果,并用before和after伪类来实现。
分析过程
首先画一个div
<div id="taiji"></div>
#taiji {
width: 192px;
height: 96px;
background: #eee;
border-color: black;
border-style: solid;
border-width: 0px 0px 96px 0px;
border-radius: 100%;
position: relative;
}
其次画出两个伪类
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 36px solid black;
border-radius: 100%;
width: 24px;
height: 24px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: black;
border: 36px solid #eee;
border-radius:100%;
width: 24px;
height: 24px;
}
下面是效果图
css分割.png
最后将两个div合并成一个div,就可以得到完整的太极了
完整css.png
下面我们加点特效,给这个div一个shadow效果和动画效果。
这就需要box-shadow和keyframes了,box-shadow一共有四个参数,分别:水平距离,竖直距离,模糊程度和颜色,我们只需要模糊程度和颜色,所以前两个参数给0,代码是box-shadow:0 0 1.5em black;
;接下来我们在给太极动画效果,代码是animation: roate 10s infinite linear;
和 @keyframes roate {0% {transform: rotateZ(0)}100% {transform: rotateZ(360deg) } }
。
最后我们就完成了完整的css太极和动画。
太极和动画.png
预览效果:https://xiaozhi1.github.io/css-taiji/
参考文档
1.https://css-tricks.com/examples/ShapesOfCSS/
2.https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
3.https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
4.https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
网友评论