<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> <title>qdabc.cn</title> <style> body{ background-color: #ccc; } .box{ width: 400px; height: 400px; margin: 0 auto; position: relative; display: flex; align-items: center; border-radius: 50%; overflow: hidden; -webkit-transition: all 3s; -webkit-animation: cd 3000ms infinite linear ; -o-animation: cd 3000ms infinite linear ; animation: cd 3000ms infinite linear ; } @-webkit-keyframes cd { 0% { -webkit-transform: rotate(0deg); } 50%{-webkit-transform:rotate(-180deg) ;} 100% { -webkit-transform: rotate(-360deg); } } .l{ width: 200px;height: inherit;background-color: #000; } .r{ width: 200px;height: inherit;background-color: #fff; } .c{ width: 200px;height: inherit; position: absolute; margin-left: -100px;left: 50%;top:0;} .wc{ width: 60px; height:60px; border:70px solid #fff; background-color: #000; border-radius: 50%; } .bc{ width: 60px; height:60px; border:70px solid #000; background-color: #fff; border-radius: 50%; } </style> </head> <body> <div class="box"> <div class="l"></div> <div class="r"></div> <div class="c"> <div class="bc"></div> <div class="wc"></div> </div> </div> </body> </html>
欢迎分享本文,转载请保留出处:前端ABC » css3 实现一个旋转八卦图