實作的效果如下：
我之是以将其拿出來分享，一方面覺得它看起來比較酷，也像原作者所說的那樣：
看起來是個令人生畏的病毒
，另一方面覺得作者的編碼思路和代碼值得了解學習下。
步驟一：制作八卦圖
第一步是使用 CSS 建立陰陽八卦圖，如下：
上面僅使用一個
div
元素，配合
::before
和
::after
建立僞元素完成。看下面的代碼，你應該就懂了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yinyang</title>
<style>body {
background-color: #eee;
}
.yinyang {
position: relative;
background-color: #fff;
height: 100px;
width: 100px;
border-radius: 50%;
background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
}
.yinyang::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 18px solid #000;
border-radius: 50%;
width: 14px;
height: 14px;
}
.yinyang::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #000;
border: 18px solid #fff;
border-radius: 50%;
width: 14px;
height: 14px;
}
</style>
</head>
<body>
<div class="yinyang"></div>
</body>
</html> 你可以運作上面的代碼進行驗證
步驟二：整合八卦圖
我們需要一個外部的元素
div
對我們生成的兩個八卦圖進行管理。其實我們相當于又制作了一個大的八卦圖，如下：
這裡制作的方法跟步驟一的方法大同小異，這裡就不進行贅述了。
步驟三：添加動畫
下面我們讓圖動起來。為八卦圖添加
animation
動畫。
@keyframes roll {
from {
transform: rotate(0deg); // 從零度開始
}
to {
transform: rotate(-360deg); // 旋轉一周
}
} 當然，我們需要它循環旋轉，要在
.yinyang
類中操作：
.yinyang {
animation: roll 4s linear infinite; // 4秒中完成一次勻速動畫，并循環播放 完結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yinyang</title>
<style>body {
background-color: #eee;
}
.circle {
margin-top: 3rem;
box-sizing: border-box;
height: 200px;
width: 200px;
border-radius: 50%;
padding-left: 50px;
background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
animation: roll 10s linear infinite;
/* 反向旋轉 */
animation-direction: reverse;
}
.yinyang {
position: relative;
background-color: #fff;
height: 100px;
width: 100px;
border-radius: 50%;
background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
/* 4秒中完成一次勻速動畫，并循環播放 */
animation: roll 4s linear infinite;
}
.yinyang::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 18px solid #000;
border-radius: 50%;
width: 14px;
height: 14px;
}
.yinyang::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #000;
border: 18px solid #fff;
border-radius: 50%;
width: 14px;
height: 14px;
}
@keyframes roll {
from {
/* 從零度開始 */
transform: rotate(0deg);
}
to {
/* 旋轉一周 */
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="circle">
<div class="yinyang"></div>
<div class="yinyang"></div>
</div>
</body>
</html>