自己用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. 力扣算法题—050计算pow（x, n）

    #include "000库函数.h" //使用折半算法 牛逼算法 class Solution { public: double myPow(double x, int n) { ...

  2. MySql 中文写入数据库乱码及Incorrect string value: '\xF0\x9F...' for column 'XXX' at row 1解决

    一.中文写入乱码问题 我输入的中文编码是 urf8 的,建的库是 urf8 的,但是插入MySQL总是乱码,一堆"???????????????????????".可以使用以下的方 ...

  3. Servlet中的request与response

    了解这方面的知识可以查看以下博客 https://www.cnblogs.com/zhangyinhua/p/7629221.html https://www.cnblogs.com/zhaojian ...

  4. Spring事务管理2--声明式

    简述 1.Spring 的声明式事务管理在底层是建立在 AOP 的基础上.其本质是在方法前后进行拦截,然后在目标方法开始之前创建一个事务,在执行这目标方法结束后,根据执行情况提交或进行回滚事务. 2. ...

  5. 【工具大道】UML的点点滴滴

    本文地址 点击关注微信公众号 wenyuqinghuai 分享提纲: 1. 概述 2. UML类图 3. UML时序图 4. 参考资料   1.概述   1.1)百度百科:           又称统 ...

  6. Winform知识汇总之多次绑定DataGridView的DataSource会报错 NullReferenceExcepti

    最近做了一个winform的项目,数据绑定在datagridview中,datagridview中的数据需要删除,分页,更新等之类的操作,所以就涉及到了datagridview的重新绑定问题,而且这些 ...

  7. Spring Web项目spring配置文件随服务器启动时自动加载

    前言:其实配置文件不随服务器启动时加载也是可以的,但是这样操作的话,每次获取相应对象,就会去读取一次配置文件,从而降低程序的效率,而Spring中已经为我们提供了监听器,可监听服务器是否启动,然后在启 ...

  8. Linux shell判断文件和文件夹是否存在（转发）

    #!/bin/sh myPath="/var/log/httpd/" myFile="/var /log/httpd/access.log" #这里的-x 参数 ...

  9. 发现一款比echarts更牛B，效果更炫的图表组件 d3.js

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code d3.js  ,能制作更加复杂的图表 https://github.com/d3/d3 ...

  10. 初学Python——进程

    什么是进程? 程序不能单独执行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的过程就叫做进程.进程是操作系统调度的最小单位. 程序和进程的区别在于:程序是储存在硬盘上指令的有序集合,是 ...