MENU

纯CSS实现旋转的八卦图

• January 15, 2018 • Read: 163 • Code

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title></title>
   <style type="text/css">
   div {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
       box-sizing: border-box;
       width: 400px;
       height: 400px;
       margin: auto;
       border: 1px solid black;
       border-bottom: 200px solid black;
       border-radius: 50%;
       transform-origin: 50% 50%;
       animation-name: rotate;
       animation-duration: 5s;
       animation-timing-function: linear;
       animation-iteration-count: infinite;
   }
   div:before {
       position: absolute;
       top: 100px;
       box-sizing: border-box;
       width: 199px;
       height: 199px;
       content: '';
       border: 75px solid black;
       border-radius: 50%;
       background: white;
   }
   div:after {
       position: absolute;
       top: 100px;
       right: 0;
       box-sizing: border-box;
       width: 199px;
       height: 199px;
       content: '';
       border: 75px solid white;
       border-radius: 50%;
       background: black;
   }
   @keyframes rotate {
       form { transform: rotate(0deg); }
       to { transform: rotate(360deg); }
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>