效果图：

在线演示地址：纯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. 《ImageNet Classification with Deep Convolutional Neural Networks》 剖析

    <ImageNet Classification with Deep Convolutional Neural Networks> 剖析 CNN 领域的经典之作, 作者训练了一个面向数量为 ...

  2. xshell4|5远程连接工具

    志同道合,方能谈天说地! 对比其他的工具,对于功能来说xshell是比较厉害的.有能力的可以支持正版! Xshell4 链接: http://pan.baidu.com/s/1jHAgboa 密码: ...

  3. C#高级特性_Attribute

    Attribute: 公共语言运行时允许你添加类似关键字的描述声明,叫做attributes, 它对程序中的元素进行标注,如类型.字段.方法和属性等.Attributes和Microsoft .NET ...

  4. 1014mysqldumpslow.pl简单分析慢日志 WINDOW平台

    转自http://www.th7.cn/db/mysql/201507/113998.shtml 要想运行mysqldumpslow.pl(这是perl程序),下载perl编译器.下载地址:http: ...

  5. [转]jQuery EasyUI自定义DataGrid的Editor

    原文地址:http://www.jeasyuicn.com/post-3.html 官网datagrid的api:http://jquery-easyui.wikidot.com/document:d ...

  6. Jenkins_获取源码编译并启动服务（二）

    一.创建Maven项目   二.设置SVN信息   三.设置构建触发器   四.设置Maven命令   五.设置构建后发邮件信息(参考文章一) 六.设置构建后拷贝文件到远程机器并执行命令   来自为知 ...

  7. DOS常用命令收集（长期更新）

    命令列表 命令 说明 ASSOC 显示或修改文件扩展名关联. ATTRIB 显示或更改文件属性. BREAK 设置或清除扩展式 CTRL+C 检查. BCDEDIT 设置启动数据库中的属性以控制启动加 ...

  8. json2form实例

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  9. 第6届蓝桥杯javaA组第7题，牌型种数，一道简单的题带来的思考

    题目: 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得到 ...

  10. block的使用

    转载自:http://mobile.51cto.com/hot-403897.htm 一.概述 Block是C级别的语法和运行时特性.Block比较类似C函数,但是Block比之C函数,其灵活性体现在 ...