主要使用border-radius属性实现圆，半圆，定位坐标覆盖部分模块。

半圆：

width: 50%; height: 100%;
border-radius:100% 0 0 100% /50% 0 0 50%;
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>太极图</title>

    <style type="text/css">

    .taiji{position: relative; width: 200px; height: 200px; border-radius: 50%; background-color: #fff;border:solid 1px #ccc;    animation: spin 6s linear infinite;/*动画设置*/}

    .tj_1{position: absolute; top: 0px; width: 50%; height: 100%;}

    .tj_big1{left: 0px; border-radius:100% 0 0 100% /50% 0 0 50%; background: #000;}

    .tj_big2{right: 0px; border-radius:0 100% 100% 0 / 0 50% 50% 0; background: #fff;}

    .tj_2{position: absolute; width: 50%; height: 50%; left: 25%; border-radius: 50%;}

    .tj_s1{bottom: 0px; background: #fff;}

    .tj_s2{top: 0px; background: #000;}

    .tj_ss{position: absolute; width: 25%; height: 25%; left: 37.5%;border-radius: 50%;}

    .tj_w{top:37.5%;background: #000;}

    .tj_b{top:37.5%;background: #fff;}

    /*动画方法*/

    @keyframes spin {

    0% {

           transform:rotate(0deg);

     }

     100% {

           transform:rotate(360deg);

     }

    }

    </style>

</head>

<body>

    <div class="taiji">

        <div class="tj_1 tj_big1"></div>

        <div class="tj_1 tj_big2"></div>

        <div class="tj_2 tj_s1">

            <div class="tj_ss tj_w"></div>

        </div>

        <div class="tj_2 tj_s2">

            <div class="tj_ss tj_b"></div>

        </div>

    </div>

</body>

</html>

实例源码

css3太极图效果+自动旋转的更多相关文章

  1. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

  2. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

  3. iOS系统自带的 UIAlertView 自动旋转的实现

    这里主要解析 UIAlertView 的几个关键功能的实现: 随着设备屏幕的旋转而旋转: Alert弹出框,使用UIWindow来实现,就是说,不用依赖于当前显示在最前面的UIView. 实现源码参考 ...

  4. css3 3D效果

    css3 3D变形 transfrom初学 这个礼拜学了css3 3d,感觉到css无穷的魅力,可以通过几个特定的代码符号创建出3D效果的页面. ___ 透视 一个元素需要一个透视点才能激活3D空间, ...

  5. 那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

    apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...

  6. CSS3动画效果之Transform

    无意中翻看博客发现这个属性,就顺便熟悉了一下,百度了一下和查看了CSS3帮助文档,特整理一下 Transform 适应于对任一DOM元素的2D或3D转换,转换效果有:旋转.拉伸.平移.倾斜等. 目前浏 ...

  7. CSS3实现3D木块旋转动画

    CSS3实现3D木块旋转动画,css3特效,旋转动画,3D,立体效果,CSS3实现3D木块旋转动画是一款迷人的HTML5+CSS3实现的3D旋转动画. 代码下载:http://www.huiyi8.c ...

  8. CSS3轻松实现彩色旋转六面体动画

    一.效果预览: 二.基本思路: 1.首先这个一个自动触发的动画,因此应使用animation设计,包括自动组装和组装完成后自动旋转的过程: 2.当鼠标放上去的时候六个面及上面的字体均变色,应在六个面设 ...

  9. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

随机推荐

  1. 树套树专题——bzoj 3110: [Zjoi2013] K大数查询 &amp; 3236 [Ahoi2013] 作业 题解

    [原题1] 3110: [Zjoi2013]K大数查询 Time Limit: 20 Sec  Memory Limit: 512 MB Submit: 978  Solved: 476 Descri ...

  2. js源码保护

    js的不可读化处理分为三个方面:压缩(compression).混淆(obfuscation) 和加密(encryption). (不可读化处理,这是我自己发明的术语,一切会增加代码不可读性的代码转换 ...

  3. 信号之abort函数

    abort函数的功能是使异常程序终止. #include <stdlib.h> void abort(void); 此函数不返回 此函数将SIGABRT信号发送给调用进程(进程不应忽略此信 ...

  4. c++内联函数与静态函数

    不能是虚函数的成员函数有:静态成员函数,内联成员函数,构造函数.没有什么函数需要硬性规定为虚函数,一般析构函数会被定义为虚函数其他就是在继承类中可能需要override的类成员函数应该定义为虚函数 h ...

  5. Android_listView_BaseAdapter_downLoadImg

    layout.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" x ...

  6. 如何实现XA式、非XA式Spring分布式事务

    Spring应用的几种事务处理机制 Java Transaction API和XA协议是Spring常用的分布式事务机制,不过你可以选择选择其他的实现方式.理想的实现取决于你的应用程序使用何种资源,你 ...

  7. ReentrantLock和synchronized的区别

    一.ReentrantLock类 ReentrantLock 类实现了 Lock ,它拥有与 synchronized 相同的并发性和内存语义,但是添加了类似锁投票.定时锁等候和可中断锁等候的一些特性 ...

  8. css扁平化博客学习总结（一）模块分析

    一.模块分析 1.每开发一个项目之前,首先要对项目进行一个大致规划,它到底要做什么功能,它有什么具体需求. 2.所以需要进行模块化分析,把这些东西具象化,把一个问题模块化,对需求有一个宏观的了解. 3 ...

  9. MVVM - 基础介绍

    MVVM模式:把页面UI和后台逻辑分开,这样做的好处是能使你的程序更容易测试,维护和改进.

  10. scala学习笔记：无参函数

    scala> def repeat(times:Int)(run:()=>Unit)=for(i<-1 to times)run() repeat: (times: Int)(run ...