使用css3绘制太极

我们将完成如下效果

绘制前先确定太极是由那些构成的，但还是可能觉得无从下手
最主要的难点就是它是如何变成下面图片那样的

拆解一下你就会明白它是如何构成的了

这一步直接画黑色圆形可能会有点懵，所以换成了红色圆形，效果更明显

把上面红色的圆形换成黑色就成了下面这种
同上面加黑圆一样，把白色的圆形加上，就形成了看似难却很简单的形状
把两个小圆还有阴影加上，然后用animation实现让它动起来
代码如下：

<head><title>绘制太极</title><style>.circle{width:400px;height:400px;border-radius:50%;position:relative;left:450px;top:130px;overflow:hidden;box-shadow:16px 10px 60px #999;animation:move 3s linear infiniter;}/*动画效果*/@keyframes move{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}/*最外层圆*/.maxcircle{width:100%;height:100%;/*把圆平分为黑白两半*/border-left:200px solid black;border-right:200px solid white;position:absolute;}/*中等黑圆*/.mblack{width:200px;height:200px;border-radius:50%;background:black;position:relative;left:-100px;}/*中等白圆*/.mwhite{width:200px;height:200px;border-radius:50%;background:white;position:relative;left:-105px;}/*小白圆*/.minwhite{width:70px;height:70px:border-radius:50%;background:white;position:relative;left:68px;top:58px;}/*小黑圆*/.minblack{widht:70px;height:70px:border-radius:50%;background:black;position:relative;left:58px;top:62px;}</style>
</head>
<body><div class="circle"><!--最外层圆--><div class="maxcircle"><!--中等黑圆--><div class="mblack"><!--里面套一个小白圆--><div class="minwhite"></div>    </div><!--中等白圆--><div class="mwhite"><!--小黑圆--><div class="minblack"></div></div></div></div>
</body>

使用css3绘制太极相关推荐

用html怎么做心形边框,利用CSS3的border-radius实现绘制太极及爱心的图案
CSS3中的border-radius可以轻松地用来绘制弧线,如果只用来做圆角矩形的话可就太浪费了,下面就来展示一下利用CSS3的border-radius绘制太极及爱心图案示例,需要的朋友可以参考下 ...
html 根据坐标画多边形,28种css3绘制多边形代码分享
本文分享了28种CSS3绘制多边形的代码.在做网页项目中需要使用多边形扇形图形来完成一些功能,第一印象就是使用CSS3来完成.经过查资料发现了transform 的skew()正好合适且且使用方便. ...
css3:绘制android3蜂巢Honeycomb
之前写过一个类似的,css3绘制android机器人图形.谷歌最近发布了android3,这次的图形挺好看的,很多地方都用到圆角,所以就想到用css3来实现.点击观看演示隔天再做了些修改,比之前的好 ...
python画太极八卦图_AI剪刀工具快速绘制太极八卦图
这篇教程主要是向大家介绍AI剪刀工具快速绘制太极八卦图方法,教程很简单,大家一起来学习吧! 具体的制作步骤如下: 1.Ctrl+N新建一个300*300mm的文档. 2.使用矩形工具,绘制一个与文档大 ...
【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
文章目录页面展示技术要点代码实现 html代码 CSS代码用到的图片页面展示本项目将使用HTML5+CSS3绘制出HTML5的logo,页面效果如下所示. 技术要点 HTML5新特性 HT ...
css3绘制的钢琴代码
下载地址 css3绘制的钢琴代码,键盘带动画效果. dd:
如何使用HTML5+CSS3绘制一个QQ 企鹅Logo
看了腾讯全端团队AlloyTeam发布的这篇<使用CSS3绘制腾讯QQ的企鹅Logo>文章,自己仿照了一下,做了个是山寨版的QQ企鹅. 之所以称之为山寨版,是因为原版绘出来的是这样: 而我 ...
CSS3 实现太极图案
CSS3实现太极图案分析图片组成(如下图所示): 先给出html代码: <div class="box"><div class="content&qu ...
css画钟表_如何使用css3绘制出圆形动态时钟
使用css3绘制出圆形动态时钟的原理众所周知的是div形状是方形的,那么我们首先需要使用border-radius属性将其变换成圆形. 为了使指针转动起来,我们需要使用-webkit-transfo ...

使用css3绘制太极

使用css3绘制太极相关推荐

最新文章

热门文章