CSS3 旋转的八卦图 - 胡樟军_H5之家 - 中国HTML5教程资源分享第一站

HTML5技术

CSS3 旋转的八卦图 - 胡樟军

字号+ 作者：H5之家来源：H5之家 2017-04-07 17:01 我要评论( )

!DOCTYPE htmlhtmlheadmeta charset="UTF-8"titlecss3八卦/titlestyle#container{height: 203px;width: 200px;border-radius: 200px;box-shadow: 0 0 4px #666666;margin: 100px auto;background: linear-gradient(90deg,black 50%,white 50%);}#top,#bottom

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3八卦</title> <style> #container{height: 203px;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:25px;width: 25px;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: bonce 5s infinite linear;} </style> </head> <body> <div> <div> <div></div> </div> <div> <div></div> </div> </div> </body> </html>