实现步骤：

基础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. bootstrap中实现外层DIV自适应，内层DIV宽度固定且居中的布局

    <!DOCTYPE html><html> <head> <link rel="stylesheet" href="css/bo ...

  2. 从“程序员转行卖烧饼”想到IT人创业

    我的一个朋友最近总在跟我念叨着“我不想做开发了,整天累死累活写程序,也攒不下几个钱.我想辞职搞点啥!” 我问他:“你想搞点啥?”. 他说:“搞啥都比做开发强,做个网站赚广告费,接私活……实在不行我去卖 ...

  3. Android布局中涉及的一些属性

    Android:gravity属性 线性布局常见的就是利用LinearLayout进行布局,其中有个比较重要的属性就是android:gravity,在官方文档中是这么描述这个属性的:指定一个元素怎么 ...

  4. 读《你必须知道的.NET》继承本质论 Bird bird=new Chicken()

    我们创建如下的三层继承层次类. public abstract class Animal { public abstract void ShowType(); } public class Bird ...

  5. SQL Server 性能优化之——T-SQL NOT IN 和 NOT Exists

    这次介绍一下T-SQL中“Not IN” 和“Not Exists”的优化. Not IN 和 Not Exists 命令 : 有些情况下,需要select/update/delete 操作孤立数据. ...

  6. jenkins2 pipeline高级

    jenkins2 pipeline里groovy的高级用法.翻译自:https://github.com/jenkinsci/pipeline-plugin/blob/master/TUTORIAL. ...

  7. jQuery Ztree基本用法

    1.首先在页面上有<ul/>标签 <ul id="tree" class="ztree"></ul> 2.定义ztree的配 ...

  8. 老生常谈： Javascript 面向对象编程初探（一）--- 封装

    Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果 ...

  9. atitit.编程语言 程序语言 的 工具性 和 材料性 双重性 and 语言无关性 本质

    atitit.编程语言 程序语言 的 工具性 和 材料性 双重性 and 语言无关性 本质 #---语言的 工具和材料双重性 有的人说语言是个工具,有的人说语言是个材料..实际上语言同时属于两个属性. ...

  10. javaweb回顾第一篇servlet的学习和理解

    前言:关于servlet相信学过java的都不会陌生,我最近又把这些基础知识整理一遍,便于自已能更好的理解ssm或者ssh,下面开始 1:Servlet接口 servlet有5个方法下面分别简单的介绍 ...