效果图：

在线演示地址：纯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. UEFI与MBR区别

     EFI与MBR启动的区别 大硬盘和WIN8系统,让我们从传统的BIOS+MBR模式升级到UEFI+GPT模式,现在购买的主流电脑,都是预装WIN8系统,为了更好的支持2TB硬盘 ,更快速的启动win ...

  2. 作业成绩 final 20161124-1201 09:00

    final阶段,20161124-1201 09:00. 申诉截止时间 20161206 12:00,微信联系杨贵福. 凡描述需求或BUG时,应给出以下4项: 你期待看到的现象如何 你实际看到的现象 ...

  3. 1017关于EXPLAIN的语法

    转自博客 http://blog.csdn.net/zhuxineli/article/details/14455029 explain显示了MySQL如何使用索引来处理select语句以及连接表.可 ...

  4. Java网络编程——概述

    一.网络模型 OSI七层模型 应用层 表示层 会话层 传输层: 网络层: 链路层 物理层:比特流 TCP/IP四层模型 应用层 传输层:数据包,TCP/UDP 网络层:数据帧 物理层:比特流 二.网络 ...

  5. oracle如何获取每个月的最后一天

    SELECT LAST_DAY(DATE'2016-09-23') FROM DUAL;

  6. Java--剑指offer（8）

    36.输入两个链表,找出它们的第一个公共结点. 解题思路:这里主要是把两个链表的节点都放入两个栈中,这样就可以按照出栈的方式来比较节点,因为单链表只要是有相同的节点,那么之后的节点也都是一样的,所以如 ...

  7. （01）javascript 数据类型

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. re模块（正则表达式）

    re 模块:正则表达式import re 内置模块: 1> re.match(pattern,string) pattern:就是正则表达式 string:被操作的对象 match,search ...

  9. Redis集群(六)：集群常用命令及说明

    一.本文目的        介绍集群的基本情况及常用命令      二.集群的特点    3.集群优缺点 三.集群客户端命令(redis-cli -c -p port) 集群cluster info ...

  10. 第一天的作业，登录接口脚本 login.py

    user_list = [] count = 0 user = "liruixin" password = " raw_user = raw_input("us ...