用CSS做动态太极图

发布 : 2019-05-08 分类 : CSS 浏览 :

1、HTML代码

1
2
3
4
<body>
<div id=yinyang></div>
<p>动态阴阳太极图</p>
</body>

2、CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
body{
background:#444;
}
@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
#yinyang{
width:200px;
height:200px;
border-radius:50%;
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#000000 50%,#000000 100%);
position:relative;
margin:100px auto 30px;
animation-name:spin;
animation-duration:1s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
#yinyang::before{
content:'';
width:20px;
height:20px;
border-radius:50%;
background:#fff;
position:absolute;
top:50px;
left:0;
border:40px solid black;
}
#yinyang::after{
content:'';
width:20px;
height:20px;
border-radius:50%;
background:#000;
position:absolute;
top:50px;
right:0;
border:40px solid white;
}
p{
color:#fff;
text-align:center;
}

3、输出样式图

动态太极图

本文作者 : LqZww
原文链接 : http://yoursite.com/2019/05/08/yong-css-zuo-yin-yang-tai-ji-tu/
版权声明 : 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
支付宝扫一扫, 向我赞赏

支付宝扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

微信扫一扫, 向我赞赏

留下足迹