效果图：

在线演示地址：纯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. Simple File System

    This is my operating system class design. scanner.h #include<string> using namespace std; #pra ...

  2. Android 轻量级输入校验库：Fire Eye

    Fire Eye是一款轻量级简单易用的Android校验库. FireEye 2.0 在 1.0 的基础上,全部重写了代码,并优化了架构,性能上和逻辑上都大大提升.只需要几行代码,即可验证用户输入,并 ...

  3. 《HTTP 权威指南》

    第一篇:  Web基础  (HTTP概述. URL.HTTP报文.连接管理) 0. scheme:方案!     协议类型 1.HTTP:超文本传输(状态转移)协议:通信协议方案.     web浏览 ...

  4. 【BZOJ 2818】gcd 欧拉筛

    枚举小于n的质数,然后再枚举小于n/这个质数的Φ的和,乘2再加1即可.乘2是因为xy互换是另一组解,加1是x==y==1时的一组解.至于求和我们只需处理前缀和就可以啦,注意Φ(1)的值不能包含在前缀和 ...

  5. HTTP协议学习---（七）代理

    本文介绍一些HTTP代理服务器的概念和工作原理 阅读目录 什么是代理服务器 Fiddler就是个典型的代理 代理作用一:FQ 代理作用二:匿名访问 代理作用三:通过代理上网 代理作用四:通过代理缓存, ...

  6. DIV 文字强制换行

    一.对于div强制换行1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准.#wrap{white-space:normal; wid ...

  7. JPA学习笔记1——JPA基础

    1.JPA简介: Java持久化规范,是从EJB2.x以前的实体Bean(Entity bean)分离出来的,EJB3以后不再有实体bean,而是将实体bean放到JPA中实现.JPA是sun提出的一 ...

  8. Android热身:通过网络获取资源并更新UI组件

    Android热身:通过网络获取资源并更新UI组件 目标 点击"发送请求"按钮,下载某网页的html源码,并显示在TextView控件上:点击"清空",清除Te ...

  9. oracle merge into 的例子

    内容来自 oracle 11g 实用教程 郑阿奇等编 在 oracle 11g中有merge语句,用于根据与原表连接的结果,对目标表执行插入,更新,或者删除操作.例如,根据在一个表中找到的差异在另一个 ...

  10. 【poj3141】 Distant Galaxy

    http://poj.org/problem?id=3141 (题目链接) 题意 给出平面上n个点,找出一个矩形,使边界上包含尽量多的点. solution 不难发现,除非所有输入点都在同一行或同一列 ...