实现步骤:

基础HTML:

<div class="box-taiji">
<div class="circle-01"></div>
<div class="circle-02"></div>
</div>

步骤一:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}

画一个宽高为400px的圆,加上阴影。

步骤二:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px 200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}

利用伪类实现左右两个半圆,一黑一白。宽为200px,高为400px;

步骤三:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px 200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px 200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}

依次画两个宽高都为200px的圆,一黑一白。上下定位。

步骤四:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px 200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}
.circle-:after,
.circle-:after {width:75px;height:75px;position:absolute;z-index:;display:block;content:"";border-radius:75px;}
.circle-:after {top:60px;left:55px;background-color:#fff;}
.circle-:after {bottom:60px;right:55px;background-color:#;}

组后两个黑白小圆,加上,布局效果搞定。

步骤五:

.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow:  50px rgba(,,,.);animation:rotation .5s linear infinite;-webkit-animation:rotation .5s linear infinite;-moz-animation:rotation .5s linear infinite;}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px 200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}
.circle-:after,
.circle-:after {width:75px;height:75px;position:absolute;z-index:;display:block;content:"";border-radius:75px;}
.circle-:after {top:60px;left:55px;background-color:#fff;}
.circle-:after {bottom:60px;right:55px;background-color:#;}
@keyframes rotation {
% {transform:rotate(0deg);}
% {transform:rotate(360deg);}
}
@-webkit-keyframes rotation {
% {-webkit-transform:rotate(0deg);}
% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation {
% {-moz-transform:rotate(0deg);}
% {-moz-transform:rotate(360deg);}
}

添加上动画效果,搞定、收工!!!

总结:

1、效果布局主要用了用了3个DIV,配合:before、:after利用css3中的圆角(border-radius)、阴影(box-shadow)完成。

2、动画效果CSS3中的@keyframes、animation

完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3绘制旋转的太极图案</title>
<style>
body {background-color:#;}
.box-taiji {width:400px;height:400px;position:relative;margin:50px auto;border-radius:400px;background-color:#;box-shadow: 50px rgba(,,,.);animation:rotation .5s linear infinite;-webkit-animation:rotation .5s linear infinite;-moz-animation:rotation .5s linear infinite;}
.box-taiji:before,
.box-taiji:after {width:200px;height:400px;position:absolute;top:;display:block;content:"";}
.box-taiji:before {left:;border-radius:200px 200px;background-color:#;}
.box-taiji:after {right:;border-radius: 200px 200px ;background-color:#fff;}
.circle-,
.circle- {width:200px;height:200px;position:absolute;z-index:;border-radius:300px;}
.circle- {top:;left:100px;background-color:#;}
.circle- {bottom:;right:100px;background-color:#fff;}
.circle-:after,
.circle-:after {width:75px;height:75px;position:absolute;z-index:;display:block;content:"";border-radius:75px;}
.circle-:after {top:60px;left:55px;background-color:#fff;}
.circle-:after {bottom:60px;right:55px;background-color:#;}
@keyframes rotation {
% {transform:rotate(0deg);}
% {transform:rotate(360deg);}
}
@-webkit-keyframes rotation {
% {-webkit-transform:rotate(0deg);}
% {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation {
% {-moz-transform:rotate(0deg);}
% {-moz-transform:rotate(360deg);}
}
</style>
</head> <body> <div class="box-taiji">
<div class="circle-01"></div>
<div class="circle-02"></div>
</div> </body>
</html>

CSS3绘制旋转的太极图案(一)的更多相关文章

  1. 基于CSS3伪元素和动画绘制旋转太极图

    通过CSS3的动画知识来完成一个旋转的太极. 任务 1.创建一个div,用CSS控制其大小.边框.位置等,做成一个静态的圆形,一半为红色一半为白色. 2.用div的伪元素位置两个圆环并放置核实位置,使 ...

  2. html5--5-14 阶段小练习:绘制太极图案

    html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...

  3. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  4. HTML 5:绘制旋转的太极图

    HTML: <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title& ...

  5. 用纯CSS3绘制萌系漫画人物动态头像

    大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...

  6. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  7. .NET绘制旋转太极图

    .NET绘制旋转太极图 我之前发了一篇<用.NET写"算命"程序>的文章,但有人纷纷提出了质疑,认为没有"科学"(mi xin)依据

  8. Winform GDI+绘图二:绘制旋转太极图

    大家好,今天有时间给大家带来Winform自绘控件的第二部分,也是比较有意思的一个控件:旋转太极图. 大家可以停下思考一下,如果让你来绘制旋转的太极图,大家有什么样的思路呢?我今天跟大家展示一下,我平 ...

  9. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

随机推荐

  1. (转)对.net系统架构改造的一点经验和教训

    在互联网行业,基于Unix/Linux的网站系统架构毫无疑问是当今主流的架构解决方案,这不仅仅是因为Linux本身足够的开放性,更因为围绕传统Unix/Linux社区有大量的成熟开源解决方案,覆盖了网 ...

  2. 【基础知识】.Net基础加强11天

    一. 扩展方法 1. 声明扩展方法的步骤: 1> 类必须是static,方法是static ,第一个参数是被扩展的对象,前面标注(this 数据类型参数名). 2> 使用扩展方法的时候必须 ...

  3. C语言 对称矩阵 压缩 实现

    对称矩阵压缩的简单实现 (GCC编译). /** * @brief C语言 对称矩阵 压缩 实现 * @author wid * @date 2013-11-03 * * @note 若代码存在 bu ...

  4. [.NET 即时通信SignalR] 认识SignalR (一)

    ASP .NET SignalR[1] 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知 ...

  5. 你在用什么思想编码:事务脚本 OR 面向对象?

    最近在公司内部做技术交流的时候,说起技能提升的问题,调研大家想要培训什么,结果大出我意料,很多人想要培训:面向对象编码.于是我抛出一个问题:你觉得我们现在的代码是面向对象的吗?有人回答:是,有人回答否 ...

  6. 深究JS异步编程模型

    前言  上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...

  7. 1121 if条件语句练习--输入年月日判断执行

    <script type="text/javascript"> var a=prompt("请输入一个年","请输入年份"); ...

  8. web前端基础——jQuery编程进阶

    1 jQuery本质 jQuery不是一门独立的语言,它是JavaScript的一个类库或框架.jQuery的核心思想就是:选取元素,对其操作.很多时候写jQuery代码的关键就是怎样设计合适的选择器 ...

  9. Python之Django--ORM连表操作

    一对多 class UserType(models.Model): caption = models.CharField(max_length=32) class UserInfo(models.Mo ...

  10. Linux 常用命令小结

    学习脚本几天了,总结下linux debian下脚本常用命令. Linux    1.添加删除账户 useradd / userdel    2.修改"张三"密码 passwd 张 ...