这类的东西网上一搜就是大把的，看着比较空旷的博客，所以自己也来写一个。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #yin-yang{

                position: absolute;

                margin:auto;

                top:0;

                right:0;

                bottom:0;

                left:0;

                /*上面一段代码是垂直居中定位*/

                width:192px;

                height:96px;

                background-color:white ;

                border-color: black;

                border-style: solid;

                border-width: 2px 2px 98px 2px;

                border-radius: 100%;

                animation-name: turn;   /*动画名称*/

                animation-delay: 1s;　　/*动画延迟时间*/

                animation-direction: normal; /*动画效果有反复交递等*/

                animation-duration: 1s;   /*动画执行时间*/

                animation-timing-function: linear; /*动画执行方法此为匀速方法*/

                animation-iteration-count: infinite; /*执行动画的次数此为无限次数*/

            }

            #yin-yang:before{

                content:'';

                position: absolute;

                top:50%;

                left:0;

                width:24px;

                height:24px;

                background-color: white;

                border:36px solid black;

                border-radius: 100%;

            }

            #yin-yang:after{

                content:'';

                position: absolute;

                top:50%;

                right: 0;

                width:24px;

                height:24px;

                background-color: black;

                border:36px solid white;

                border-radius: 100%;

            }

            @keyframes turn{

                0{transform: rotate(0);}

                100%{transform: rotate(360deg);}

            }

        </style>

    </head>

    <body>

        <div id="yin-yang"></div>

    </body>

</html>

转动的八卦图纯css实现的更多相关文章

  1. 使用CSS达到阴阳八卦图等图形

    CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  2. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  3. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. 用CSS伪类制作一个不断旋转的八卦图？

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

  5. 用CSS实现阴阳八卦图等图形

    CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  6. 纯CSS手动滑动轮播图（隐藏滚动条）

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  7. css 纯css轮播图 示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

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

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

  9. 纯css就能实现可点击切换的轮播图，feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

随机推荐

  1. http、tcp及从请求到渲染的过程

    http.tcp及从请求到渲染的过程 https://blog.csdn.net/pambassador/article/details/88539478 http请求的结构内容 https://ww ...

  2. rest-assured之如何指定请求数据(Specifying Request Data 包括请求参数、请求头、cookie等)

    我们除了可以为一个请求指定请求参数之外,还可以指定请求头(header).cookies.请求体(body)以及请求内容类型(content-type)等,下面我们就来一一介绍一下: 一.请求HTTP ...

  3. [原创]markdown语法学习（commonmark）

    CommonMark是markdown的解析器,以下是部分学习链接: commonmark规范 https://spec.commonmark.org/ commonmark帮助 https://co ...

  4. 2.5 Go 算术运算与变量使用技巧

    变量作用域 简单来说,GO的变量以块为范围:一个if-else的块,就可以包含一个变量的生命周期.变量的声明,要在使用之前. package main import ( "fmt" ...

  5. vscode用yuml画类图

    vscode用yuml画类图 最近在找画类图的工具,发现vscode一款插件很好用,还支持markdown.vscode插件中直接搜索yuml安装即可. 文件后缀.yuml. 文件开头第一行这样写// ...

  6. Java 继承学习

    Java 继承 继承实现: 在Java中,如果实现继承的,需要使用Java关键字——extends : 被继承的类叫做超类,继承超类的类叫子类.(一个子类亦可以是另一个类的超类) class 子类 e ...

  7. jconsole 和jvisualVM 监控远程 spring boot程序

    监控java 程序 增加启动参数 java  \ -Djava.rmi.server.hostname=192.168.2.39 \ -Dcom.sun.management.jmxremote \- ...

  8. 【DB2】普通用户最小查询权限分配

    1. 通过实例用户或者有dbadm权限的用户连接数据库 db2 connect to <db-name> 2. 分配普通用户连接权限db2 "grant connect on d ...

  9. (转)MySQL- 5.7 sys schema笔记，mysql-schema

    原文:http://www.bkjia.com/Mysql/1222405.html http://www.ywnds.com/?p=5045 performance_schema提供监控策略及大量监 ...

  10. MySQL PRIMARY KEY 和 UNIQUE的区别

    primary key = unique +  not null unique 就是唯一,当你需要限定你的某个表字段每个值都唯一,没有重复值时使用.比如说,如果你有一个person 表,并且表中有个身 ...