CSS3 旋转的八卦图

randyjin 2018-02-09

经常看到旋转八卦图,所以亲自动手用css写了一个,兼容方面还未做处理

原理很简单,先画好八卦图后,旋转即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #container{height: 200px;width: 200px;border-radius: 202px;box-shadow: 0 0 4px #666666;margin: 100px auto;
            background: linear-gradient(90deg,black 50%,white 50%);}
        #top,#bottom{height: 75px;width: 100px;padding-top:25px;margin: 0 auto;border-radius: 100px}
        #inner1,#inner2{height:50px;width: 50px;margin: 0 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>

.

相关推荐