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

<!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. 微信小程序 没有找到node_modules目录 ，小程序引入vant框架报错。

    如果大家是按照官网的引入方法,是否报错如图 不着急,大家就试试我的方法吧!两步走完美搞定! 第一步: 在小程序顶部点击设置->项目设置,会弹出下面的窗口.大家把使用npm模块勾上对勾. 第二步: ...

  2. <div>标签输入文字

    @*输入框,contenteditable="true"使能div可以输入文字*@ <div contenteditable="true" class=& ...

  3. Emma姐

  4. mybatis中调用游标，存储过程，函数

    在ibatis和Mybatis对存储过程和函数函数的调用的配置Xml是不一样的,以下是针对Mybatis 3.2的环境进行操作的. 第一步配置Mapper的xml内容 <mapper names ...

  5. python web开发小结

    书籍 <python基础教程> <流畅的python> web框架 flask django tornado ORM sqlalchemy orator 消息队列 celery ...

  6. Mac系统下Eclipse代码联想功能（代码助手，代码提示）快捷键

    Eclipse for mac 代码提示(代码助手,代码联想)快捷键修改一.每次输入都自动提示点击Eclipse,使其成为第一响应者,preferences->Java->Editor-& ...

  7. 《大数据日知录》读书笔记-ch3大数据常用的算法与数据结构

    布隆过滤器(bloom filter,BF): 二进制向量数据结构,时空效率很好,尤其是空间效率极高.作用:检测某个元素在某个巨量集合中存在. 构造: 查询: 不会发生漏判(false negativ ...

  8. Java .Net Byte数组存储差异以及解决方法

    最近在Java与.Net服务Bytes数据交互碰到一个问题:.Net IntToBytes结果和Java IntToBytes结果是反序的,查了一下发现:Java stores things inte ...

  9. win10中VirtualBox联网设置

    <分享>关于win10操作系统中VirtualBox无法桥接的解决方法 版权声明:本文为博主原创文章,未经博主允许不得转载. 升级win10,本来是一件很好的事,想好好体验一下新版本的感觉 ...

  10. mysql 远程链接问题

    问题描述: 从一台linux远程连接另一台linux上的MySQL, 出现ERROR 2003 (HY000): Can't connect to MySQL server on 'xxx.xxx.x ...