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

<!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. 什么是hive

    Hadoop Hive概念学习系列之什么是Hive? 参考  <Hadoop大数据分析与挖掘实战>的在线电子书阅读                   http://yuedu.baidu ...

  2. [摸鱼]cdq分治 && 学习笔记

    待我玩会游戏整理下思绪(分明是想摸鱼 cdq分治是一种用于降维和处理对不同子区间有贡献的离线分治算法 对于常见的操作查询题目而言,时间总是有序的,而cdq分治则是耗费\(O(logq)\)的代价使动态 ...

  3. django Form数据读取问题

    1.在我学习django的过程中,我学习到了一个关于表单验证的问题 2.我们从前端post一个表单,通过urls配置,传给对应的view方法 3.然后再传给Form验证 4.一开始我是很好奇,在vie ...

  4. Access computer files on iPad without using iTunes.

    going to my CSDN blog ---> https://blog.csdn.net/qq_37746801/article/details/89708103

  5. Linux使用日志

    Linux使用日志 ----------------------------------------------------------------------------- SecureCRTPor ...

  6. Python学习 day12

    一.@wraps __name__    查看函数的名字 __doc__   查看函数的文档字符串 例: def func(arg): """ 这是一个测试函数,这里是函 ...

  7. js获取字符串字节的位数

    ifSubUser.getBlength = function(str){ ;i--;){ n += str.charCodeAt(i) > ? : ; } return n; }

  8. Java 继承学习

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

  9. 解决重装 Oracle 出现的 INS-32025 问题，完全卸载 Oracle11g

    如果您要重装 Oracle,并且安装程序正在运行,请先关闭它. 完全卸载: 1.停止所有 Oracle 服务 2.通过开始菜单 Oracle Installation Products -> U ...

  10. Ubuntu 16.04安装IntelliJ出品的数据库管理工具DataGrip

    IntelliJ出品的东西有一个共同特定,就是代码提示做的非常好. DataGrip是除了MySQL Workbench之外的另一个选择. 一.下载 https://www.jetbrains.com ...