實現(xiàn)效果：
https://vicfun.github.io/vs-demo/taichi.html
代碼部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
@keyframes spin {
from {
transform: rotate(0deg); /*讓太極以0度開始轉(zhuǎn)變*/
}
to {
transform: rotate(360deg) /*讓太極以360度結(jié)束轉(zhuǎn)變*/
}
}
body{
background: rgb(205,179,128);
}
#taichi{
margin: 0 auto;
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 50%,#050505 50%,#000000 99%);
position: relative;
animation-duration: 3s; /*讓太極的旋轉(zhuǎn)速度為3s*/
animation-name: spin; /*css動畫 animation*/
animation-iteration-count: infinite; /*讓太極無數(shù)次旋轉(zhuǎn)*/
animation-timing-function: linear; /*讓太極以線性速度旋轉(zhuǎn)*/
}
#taichi::before{
content: '';
border-radius: 50%;
position: absolute;
top: 50px;
left: 0;
background: #fff;
width: 20px;
height: 20px;
border: 40px solid #000;
}
#taichi::after{
content: '';
border-radius: 50%;
position: absolute;
top: 50px;
right: 0;
background: #000;
width: 20px;
height: 20px;
border: 40px solid #fff;
}
</style>
</head>
<body>
<div id= "taichi"></div>
</body>
</html>
