| |
<!DOCTYPE html> |
| |
<html> |
| |
<head lang="en"> |
| |
<meta charset="UTF-8"> |
| |
<title>css3八卦</title> |
| |
<style> |
| |
body{background-color: lightgray;} |
| |
@-webkit-keyframes yidong{ |
| |
100%{transform: translate(200px) rotate(720deg)} |
| |
} |
| |
#bagua{ |
| |
width: 200px; |
| |
height: 100px; |
| |
background-color: #fff; |
| |
border-bottom: 100px solid #000; |
| |
border-radius: 50%; |
| |
position: relative; |
| |
|
| |
-webkit-animation: yidong 10s ease 0.1s forwards; |
| |
} |
| |
#bagua:before{ |
| |
content: ""; |
| |
width: 36px; |
| |
height: 36px; |
| |
border: 32px solid #000; |
| |
background-color: #fff; |
| |
position: absolute; |
| |
top: 50px; |
| |
border-radius: 50%; |
| |
} |
| |
#bagua:after{ |
| |
content: ""; |
| |
width: 36px; |
| |
height: 36px; |
| |
border: 32px solid #fff; |
| |
background-color: #000; |
| |
position: absolute; |
| |
top: 50px; |
| |
left: 100px; |
| |
border-radius: 50%; |
| |
} |
| |
|
| |
|
| |
|
| |
</style> |
| |
</head> |
| |
<body> |
| |
<div id="bagua"></div> |
| |
</body> |
| |
</html> |
