效果图：

在线演示地址：纯css3实现旋转的太极图

代码如下：

<!DOCTYPE html>

<html>

<head lang="zh">

    <meta charset="UTF-8">

    <title>css3实现旋转的太极图</title>

    <style>

        body{margin: 0;padding: 0;}

        #container{

            position: relative;

            width: 500px;height: 250px; background: #fff; border-radius: 100%; margin: 100px auto;

            border: 6px solid #000; border-bottom-width: 250px;

            animation:animat 6s linear infinite;

        }

        #container:before,#container:after{

            content: '';

            position: absolute;

            width: 70px;

            height: 70px;

            border-radius: 100%;

            top: 50%;

            border: 90px solid;

        }

        #container:before{

            background: #fff;left: 0;border-color: #000;

        }

        #container:after{

            background: #000;right: 0;border-color: #fff;

        }

        @keyframes animat{

            0%   { transform: rotate(0deg);}

            100% { transform: rotate(360deg);}

        }

    </style>

</head>

<body>

    <div id="container"></div>

</body>

</html>

没有做浏览器兼容，建议在chrome浏览！

注意：这个效果不是我原创，但是我一个字一个字敲出来的^_^

纯css3实现旋转的太极图的更多相关文章

  1. CSS3实现旋转的太极图（二）：只用1个DIV

    效果预览:   PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...

  2. 纯css3图片旋转展示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. 纯css3 3D图片立方体旋转动画特效

    纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8g ...

  4. 纯CSS3超酷3D旋转立方体动画特效

    简要教程 这是一款神奇的纯 CSS3 立方体动画特效插件.使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转.翻转动画, CSS3 展现了它无穷的魅力.使 ...

  5. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  6. 纯css3实现的圆形旋转分享按钮

    之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...

  7. 一款纯css3实现的发光屏幕旋转特效

    今天给大家带来一款纯css3实现的发光屏幕旋转特效.该屏幕由纯css3实现带发光旋转特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="s ...

  8. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  9. 纯css3艺术文字样式效果代码

    效果:http://hovertree.com/texiao/css3/1/ 本效果主要使用text-shadow实现.参考:http://hovertree.com/h/bjaf/css3_text ...

随机推荐

  1. 遍历Arraylist的方法：

    遍历Arraylist的几种方法: Iterator it1 = list.iterator();        while(it1.hasNext()){            System.out ...

  2. 77 swapon-激活Linux系统中交换空间

    Linux swapon命令用于激活Linux系统中交换空间,Linux系统的内存管理必须使用交换区来建立虚拟内存. 语法 /sbin/swapon -a [-v] /sbin/swapon [-v] ...

  3. C#中的Where和Lambda表达式

    1 2 3 4 5 6 7 8 9 10 11 List<string> listString = new List<string>(); listString.Add(&qu ...

  4. python环境搭建-Pycharm 调整字体大小

  5. viewSub惰性装载器

    在需要的时候才解析,不耗费资源 <ViewStub android:id="@+id/stub" android:layout_width="wrap_conten ...

  6. 用Okhttp框架登录之后的Cookie设置到webView中(转)

    1.webview中设置: [java] view plain copy @SuppressWarnings("deprecation") public void synCooki ...

  7. Nginx 的编译安装和URL地址重写

    本文转自:http://www.178linux.com/14119#rd?sukey=ecafc0a7cc4a741b573a095a3eb78af6b4c9116b74d0bbc9844d8fc5 ...

  8. [转]扩展RBAC用户角色权限设计方案

    原文地址:http://www.iteye.com/topic/930648 RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地 ...

  9. [转]如何判断js中的数据类型

    原文地址:http://blog.sina.com.cn/s/blog_51048da70101grz6.html 如何判断js中的数据类型:typeof.instanceof. constructo ...

  10. ActiveMQ(七)_伪集群和主从高可用使用

      一.本文目的         介绍如何在同一台虚拟机上搭建高可用的Activemq服务,集群数量包含3个Activemq,当Activemq可用数>=2时,整个集群可用.         本 ...