转动的八卦图纯css实现

2018-06-24 01:33:23来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

<!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>

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS学习笔记09 简单理解BFC

下一篇:Bootstrap按钮组