自己用css实现的自转动的太极，就当留个纪念。

用css实现太极有很多种实现方法，我这种大概是最简单的了吧，因为div用得太多了，哈哈。

高级一点的应该是用伪类:before和:after去减少div的用量。

当然了，我知道是因为我也用伪类来实现过太极，只是说当初写的源码找不到了，找了一下找不到就放弃了。

就像人生一样，有些东西丢了就再也找不回来了。也或许可以找回来，但是已经没有找回来的必要了。

源码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>太极</title>

        <style type="text/css">

        * {

            border: 0;

            margin: 0;

            padding: 0;

        }

        .taiji {

            width: 400px;

            height: 400px;

            border: 1px solid black;

            border-radius: 50%;

            animation: spin 6s linear infinite;

            position: relative;

            margin: 100px auto;

        }

        .taiji_half {

            width: 200px;

            height: 400px;

            position: absolute;

        }

        .taiji_half_black {

            border-radius: 100% 0 0 100% / 50% 0 0 50%;

            background: black;

        }

        .taiji_half_white {

            border-radius: 0 100% 100% 0 / 0 50% 50% 0;

            background: white;

            left: 200px;

        }

        .taiji_circle_big {

            width: 200px;

            height: 200px;

            border-radius: 50%;

            position: absolute;

            left: 100px;

        }

        .taiji_circle_big_black {

            background: black;

        }

        .taiji_circle_big_white {

            background: white;

            top: 200px;

        }

        .taiji_circle_small {

            width: 50px;

            height: 50px;

            border-radius: 50%;

            position: absolute;

            left: 75px;

            top: 75px;

        }

        .taiji_circle_small_white {

            background: white;

        }

        .taiji_circle_small_black {

            background: black;

        }

        @keyframes spin {

            0% {

                transform: rotate(0deg);

            }

            100% {

                transform: rotate(360deg);

            }

        }

        </style>

    </head>

    <body>

        <div class="taiji">

            <div class="taiji_half taiji_half_black"></div>

            <div class="taiji_half taiji_half_white"></div>

            <div class="taiji_circle_big taiji_circle_big_black">

                <div class="taiji_circle_small taiji_circle_small_white"></div>

            </div>

            <div class="taiji_circle_big taiji_circle_big_white">

                <div class="taiji_circle_small taiji_circle_small_black"></div>

            </div>

        </div>

    </body>

</html>

内容很简单，就这些了。

难点的话应该主要在【居中】和【圆角】上，要弄懂其实也不难。

今天在整理电脑文件的时候无意中整理出来的，所以想保存一下，只是突然觉得时间真的是令人猝不及防的东西。

"高中时一个同学沉迷网络，时常半夜翻墙出校上网。一夜他照例翻墙，只是翻到一半就拔足狂奔而归，面色古怪，问之不语。从此认真读书，不再上网，学校盛传他见鬼了。后来他考上了名校，再问此事的时候，他沉默良久之后终于开口，那天父亲来送生活费，舍不得住旅馆，在墙下坐了一夜。"

css太极的更多相关文章

  1. 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图

    1. DIV + CSS 练习:太极阴阳图.  基本思路:由三个div块元素组成:  #taiji太极阴阳图底面  #yin太极阴阳图阴面小圆  #yang太极阴阳图阳面小圆  (太极阴阳图:上为阳下 ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. css实例——“旋转”太极八卦图

    话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. CSS实现太极效果

    这个伪元素的位置对齐还妹搞明白 需要再研究研究   <html> <head> <title>taiji</title> <style> b ...

  5. 太极旋转-JS实现

    刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-to ...

  6. 摘记 史上最强大的40多个纯CSS绘制的图形（一）

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  7. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  8. [css]【转载】CSS样式分离之再分离

    原文链接:http://www.zhangxinxu.com/wordpress/2010/07/css%E6%A0%B7%E5%BC%8F%E5%88%86%E7%A6%BB%E4%B9%8B%E5 ...

  9. 特殊的css样式

    在一定范围大小变化的div .div { width:auto; height:auto; min-height:100px; min-width:100px; max-height:200px; m ...

随机推荐

  1. Java Native Interface（JNI）

    JNI能让Java代码在Java虚拟机里调用其他编程语言(例如C.C++)写的应用或库,且不会影响任何Java虚拟机的实现. 什么时候用JNI? 1.应用程序所需的平台相关功能,标准的Java类库不支 ...

  2. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  3. HTTP Health Checks

    This article describes how to configure and use HTTP health checks in NGINX Plus and open source NGI ...

  4. WIN10中DOCKER的安装

    1.docker的安装 环境准备 Docker for Windows是一个Docker Community Edition(CE)应用程序.Docker for Windows安装包包含了在Wind ...

  5. PostgreSQL 数据库NULL值的默认排序行为与查询、索引定义规范 - nulls first\last, asc\desc

    背景 在数据库中NULL值是指UNKNOWN的值,不存储任何值,在排序时,它排在有值的行前面还是后面通过语法来指定. 例如 -- 表示null排在有值行的前面 select * from tbl or ...

  6. Error response from daemon: rpc error: code = Unknown desc = name conflicts with

    环境:centos7 执行一下命令时, docker service create --mode global --name logspout gliderlabs/logspout 出现以下报错: ...

  7. Oracle 11gR1 RAC存储迁移方案

    一.需求Oracle 11gR1 RAC存储计划更换,数据库版本为11.1.0.7,无停机维护窗口. 二.环境准备1.主机环境.OS环境2.安装11.1.0.6.0版Clusterware(linux ...

  8. C. Nice Garland

    题意: 就是有一串灯分别颜色是R,G,B.要求将每种颜色的灯相隔2个不同的灯.比如,RGR变成RGB才叫好看. 分析: RGB有6种排列,分别是:"RGB", "RBG& ...

  9. ASP.Net：Javascript 通过PageMethods 调用后端WebMethod方法 + 多线程数据处理 示例

    ASP.Net:Javascript 通过PageMethods 调用后端WebMethod方法 + 多线程数据处理 示例 2012年04月27日 16:59:16 奋斗的小壁虎 阅读数:4500   ...

  10. SkylineGlobe TerraExplorer Pro 7.0 Web 控件版 第一行示例代码

    SkylineGlobe TerraExplorer Pro 7.0 是原生的64位应用程序,在Web端用插件方式开发的第一行示例代码如下: 常规代码,需要IE64位: <!DOCTYPE ht ...