首页 > > 网页制作 > css >

转动的八卦图纯css实现

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

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

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