CSS3 旋转的八卦图 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #container{height: 202px;width: 200px;border-radius: 200px;box-shadow: 0 0 4px #666666;margin: 100px auto;
            background: linear-gradient(90deg,black 50%,white 50%);}
        #top,#bottom{height: 100px;width: 100px;margin: 0 auto;border-radius: 100px}
        #top{border: 1px solid white;}
        #bottom{border: 1px solid black;}
        #inner1,#inner2{height:50px;width: 50px;margin: 25px  auto;border-radius: 50px; }
        #inner1{background: black}
        #inner2{background: white}
        #top{background: white}
        #bottom{background: black}
        @keyframes bonce{
            0%{transform: rotate(0deg)}
            100%{transform: rotate(360deg)}
        }
        #container{animation-name: bonce;animation-duration: 5s;animation-iteration-count: 100;animation-timing-function: linear;}
    </style>
</head>
<body>
<div id="container">
    <div id="top">
        <div id="inner1"></div>
    </div>
    <div id="bottom">
        <div id="inner2"></div>
    </div>
</div>

</body>
</html>

就是还没搞清楚inner1、inner2的border如果取消的话就会发生偏移，容我再研究。

posted @ 2016-09-28 16:06  weigram  阅读(461)  评论(0)  编辑  收藏  举报