转动的八卦图纯css实现

最新推荐文章于 2024-03-07 17:52:03 发布

weixin_34352449

最新推荐文章于 2024-03-07 17:52:03 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/zuiai/p/7108290.html

版权

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

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

转载于:https://www.cnblogs.com/zuiai/p/7108290.html

weixin_34352449

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转动的八卦图纯css实现

这类的东西网上一搜就是大把的，看着比较空旷的博客，所以自己也来写一个。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style...
复制链接

扫一扫