純CSS如何實現血輪眼+輪迴眼特效（代碼詳解）-css教學-PHP中文網

這篇文章跟大家介紹一下使用純CSS實現血輪眼輪迴眼特效的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

純CSS如何實現血輪眼+輪迴眼特效（代碼詳解）

效果（完整程式碼在底部）

其實實作並不難，都是重複的程式碼比較多。

實作（可跟著一步一步寫）：

1. 先定義基本標籤：

登入後複製

2. 定義左右眼的基本css樣式：

.zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }

登入後複製

border-bottom: 5px solid rgb(70, 70, 70); 給個灰色的眼底。

overflow：溢出隱藏。

position: relative; 相對定位。

3. 開始先定義血輪眼的基本樣式：

.zuo{ transform: translateX(-135px); border-radius: 0 120px 0 120px; box-shadow: inset 3px 2px 3px rgba(17, 17, 17, 0.8); }

登入後複製

transform: translateX(-135px); 向左偏移，讓兩眼分開。

border-radius：為兩個角設定弧度，形成眼睛形狀。

bos-shadowL給眼角一點陰影。

4. 設定眼球寬高等：

.zuo::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95px; height: 95px; border-radius: 50%; border: 2px solid #000; animation: colour 2s linear forwards; } @keyframes colour{ 0%,30%{ background-color: rgb(0, 0, 0); } 100%{ background-color: rgb(255, 4, 4); } }

登入後複製

5. 設定眼球正中間的黑點，都是些定位大小啥的，然後設定動畫然它慢慢變大：

.zuoZong{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0px; height: 0px; border-radius: 50%; background-color: rgb(0, 0, 0); z-index: 1; animation: da 3s linear forwards; } @keyframes da{ 100%{ width: 15px; height: 15px; } }

登入後複製

6. 設定三勾玉所在的圈，設定動畫讓其顯示與旋轉：

.zuoYu{ position: absolute; top: -25px; left: -25px; bottom: -25px; right: -25px; border-radius: 50%; border: 2px solid rgb(0, 0, 0); animation: zhuan 2s linear 2s forwards; opacity: 0; } @keyframes zhuan{ 100%{ opacity: 1; transform: rotate(720deg); } }

登入後複製

7. 製作三勾玉，先做一個圓，再用雙偽類製作一個圓弧，兩者結合就是勾玉了：

.zuoYu .yu{ position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color: rgb(0, 0, 0); } .zuoYu .yu::after{ content: ''; position: absolute; top: -6px; left: -1px; width: 6px; height: 20px; border-radius: 50%; border-left: 6px solid rgb(0, 0, 0); }

登入後複製

border-radius: 50% ;

border-left: 6px solid rgb(0, 0, 0);

先讓偽類別為圓，再只設定一條邊框，圓弧形成，再定位在父元素上，形成勾玉。

8. 為勾玉設定動畫，讓其從最中間變大旋轉到勾玉所在的圈：

.zuoYu .yu:nth-child(1){ animation: yu1 2s ease-in 2s forwards; } @keyframes yu1{ 0%{ opacity: 0; left: 50%; top: 50%; transform:translate(-50%,-50%) scale(0.1) ; } 100%{ left: 50%; top: -9%; transform: scale(1) rotate(80deg); } }

登入後複製

left: 50% ;
top: 50%; 在最中間。
opacity：透明。
scale(0.1)；縮小。
100%{…}到對應位置，同時變成不透明和放大成正常大小。

9. 一樣的，給其它兩個勾玉動畫：

.zuoYu .yu:nth-child(2){ animation: yu2 2s ease-in 2s forwards; } @keyframes yu2{ 0%{ opacity: 0; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.1) ; } 100%{ top: 60%; left: -9%; transform: scale(1) rotate(-60deg); } } .zuoYu .yu:nth-child(3){ animation: yu3 2s ease-in 2s forwards; } @keyframes yu3{ 0%{ opacity: 0; right: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.1); } 100%{ top: 60%; right: -9%; transform: scale(1) rotate(180deg); } }

登入後複製

10.給兩個眼睛都設定一個白點，相當於反光效果吧，至此血輪眼做完了：

.zuo::before,.you::before{ content: ''; position: absolute; left: 38%; top: 30%; width: 12px; height: 12px; border-radius: 50%; background-color: rgb(255, 255, 255); z-index: 10; }

登入後複製

position: absolute;
left: 38%;
top: 30%; 定位對應的位置。
background-color: rgb(255, 255, 255); 白色。
z-index: 10; 設定為10，顯示在最上層。

11.設定輪迴眼基本css樣式，跟血輪眼一樣：

.you{ transform: translateX(135px); border-radius: 120px 0 120px 0; box-shadow: inset -3px 2px 3px rgba(17, 17, 17, 0.8); }

登入後複製

12.設定眼球寬高等：

.you::after{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95px; height: 95px; border-radius: 50%; border: 2px solid #000; animation: youcolor 2s linear forwards; } @keyframes youcolor{ 0%,30%{ background-color: rgb(0, 0, 0); } 100%{ background-color: rgb(144, 130, 183); } }

登入後複製

position: absolute; 絕對定位
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中對齊。
animation：設定動畫，讓其變成紫色。 forward：繼承最後一格的屬性。
background-color: rgb(0, 0, 0); 黑色
background-color: rgb(144, 130, 183); 紫色。

13. 設定眼球最中間的黑點，跟血輪眼也差不多：

.dian{ position: absolute; top: 50%; left: 50%; background-color: #000; transform: translate(-50%,-50%); border-radius: 50%; z-index: 10; animation: youda 3s linear forwards; } @keyframes youda{ 0%{ height: 0px; width: 0px; } 100%{ height: 15px; width: 15px; } }

登入後複製

14. 設定輪迴眼每個圈，同時設定動畫讓其變大：

.youYu{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .quan{ position: absolute; border-radius: 50%; border: 2px solid #000; z-index: calc(1 - var(--r)); animation: zhi 2s ease-out 2s forwards; } @keyframes zhi{ 0%{ top: calc(var(--r) * 1px); left: calc(var(--r) * 1px); right: calc(var(--r) * 1px); bottom: calc(var(--r) * 1px); } 100%{ top: calc(var(--r) * -35px); left: calc(var(--r) * -35px); right: calc(var(--r) * -35px); bottom: calc(var(--r) * -35px); background-color: rgb(187, 177, 214); } }

登入後複製