纯CSS实现旋转的八卦图

2018-01-15T21:36:17
<!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>

 

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。