我们将完成如下效果
绘制前先确定太极是由那些构成的,但还是可能觉得无从下手
最主要的难点就是它是如何变成下面图片那样的
拆解一下你就会明白它是如何构成的了
这一步直接画黑色圆形可能会有点懵,所以换成了红色圆形,效果更明显
把上面红色的圆形换成黑色就成了下面这种
同上面加黑圆一样,把白色的圆形加上,就形成了看似难却很简单的形状
把两个小圆还有阴影加上,然后用animation实现让它动起来
代码如下:
<head>
<title>绘制太极</title>
<style>
.circle{
width:400px;
height:400px;
border-radius:50%;
position:relative;
lef