效果（完整代码在底部）：

实现并不难，都是重复的代码比较多。
实现（可跟着一步一步写）：
1. 先定义基本标签：

1. <!-- 血轮眼 -->
   
2.     <div class="zuo">
   
3.         <!-- 眼睛最中间那个黑点 -->
   
4.         <div class="zuoZong">
   
5.             <!-- 三勾玉所在的圈 -->
   
6.             <div class="zuoYu">
   
7.                 <!-- 三个勾玉 -->
   
8.                 <span class="yu"></span>
   
9.                 <span class="yu"></span>
   
10.                 <span class="yu"></span>
    
11.             </div>
    
12.         </div>
    
13.     </div>
    
14.     <!-- 轮回眼 -->
    
15.     <div class="you">
    
16.         <!-- 眼睛最中间那个黑点 -->
    
17.         <div class="dian"></div>
    
18.              <!-- 3个轮回圈 -->
    
19.             <div class="youYu">                        
    
20.                 <span class="quan" style="--r:2;"></span>
    
21.                 <span class="quan" style="--r:3;"></span>
    
22.                 <span class="quan" style="--r:4;"></span>
    
23.             </div>      
    
24.     </div>

复制代码

2. 定义左右眼的基本css样式：

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

复制代码

border-bottom: 5px solid rgb(70, 70, 70); 给个灰色的眼底。
overflow：溢出隐藏。
position: relative; 相对定位。
3. 开始先定义血轮眼的基本样式：

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

复制代码

transform: translateX(-135px); 向左偏移，让两眼分开。
border-radius：给两个角设置弧度，形成眼睛形状。
bos-shadowL给眼角一点阴影。
4. 设置眼球宽高等：

1. .zuo::after{
   
2.             content: '';
   
3.             position: absolute;
   
4.             top: 50%;
   
5.             left: 50%;
   
6.             transform: translate(-50%,-50%);
   
7.             width: 95px;
   
8.             height: 95px;
   
9.             border-radius: 50%;
   
10.             border: 2px solid #000;
    
11.             animation: colour 2s linear forwards;
    
12.         }
    
13.         @keyframes colour{
    
14.             0%,30%{
    
15.                 background-color: rgb(0, 0, 0);
    
16.             }
    
17.             100%{
    
18.                  background-color: rgb(255, 4, 4);
    
19.              }
    
20.          }

复制代码

position: absolute; 绝对定位
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中对齐。
animation：设置动画，让其变红色。forward：继承最后一帧的属性。
background-color: rgb(0, 0, 0); 黑色
background-color: rgb(255, 4, 4); 红色。
5. 设置眼球正中间的黑点，都是些定位大小啥的，然后设置动画然它慢慢变大：

1. .zuoZong{
   
2.             position: absolute;
   
3.             top: 50%;
   
4.             left: 50%;
   
5.             transform: translate(-50%,-50%);
   
6.             width: 0px;
   
7.             height: 0px;
   
8.             border-radius: 50%;
   
9.             background-color: rgb(0, 0, 0);
   
10.             z-index: 1;
    
11.             animation: da 3s linear forwards;
    
12.         }
    
13.         @keyframes da{
    
14.             100%{
    
15.                 width: 15px;
    
16.             height: 15px;
    
17.             }
    
18.         }

复制代码

6. 设置三勾玉所在的圈，设置动画让其显示与旋转：

1. .zuoYu{
   
2.             position: absolute;
   
3.             top: -25px;
   
4.             left: -25px;
   
5.             bottom: -25px;
   
6.             right: -25px;
   
7.             border-radius: 50%;
   
8.             border: 2px solid rgb(0, 0, 0);
   
9.             animation: zhuan 2s linear 2s forwards;
   
10.             opacity: 0;
    
11.         }
    
12.         @keyframes zhuan{
    
13.            
    
14.             100%{
    
15.                 opacity: 1;
    
16.                 transform: rotate(720deg);
    
17.             }
    
18.         }

复制代码

position: absolute;
top: -25px;
left: -25px;
bottom: -25px;
right: -25px; 大小。
border-radius: 50%;圆形。
border: 2px solid rgb(0, 0, 0); 黑色边框。
opacity：0；透明度为0；
transform: rotate(720deg); 旋转720度。
7. 制作三勾玉，先做一个圆，再用双伪类制作一个圆弧，两者结合就是勾玉了：

1. .zuoYu .yu{
   
2.              position: absolute;
   
3.              width: 15px;
   
4.              height: 15px;
   
5.              border-radius: 50%;
   
6.              background-color: rgb(0, 0, 0);
   
7. 
   
8.         }
   
9.         .zuoYu .yu::after{
   
10.             content: '';
    
11.             position: absolute;
    
12.             top: -6px;
    
13.             left: -1px;
    
14.             width: 6px;
    
15.             height: 20px;
    
16.             border-radius: 50%;
    
17.             border-left: 6px solid rgb(0, 0, 0);
    
18.         }

复制代码

border-radius: 50%;
border-left: 6px solid rgb(0, 0, 0);
先让伪类为圆，再只设置一条边框，圆弧形成，再定位在父元素上，形成勾玉。
8. 给勾玉设置动画，让其从最中间变大旋转到勾玉所在的圈：

1. .zuoYu .yu:nth-child(1){
   
2.             animation: yu1 2s ease-in 2s  forwards;
   
3.         }
   
4.         @keyframes yu1{
   
5.             0%{
   
6.                 opacity: 0;
   
7.                 left: 50%;
   
8.                 top: 50%;               
   
9.                 transform:translate(-50%,-50%)  scale(0.1) ;
   
10.             }
    
11.             100%{
    
12.                 left: 50%;
    
13.                 top: -9%;
    
14.                 transform: scale(1) rotate(80deg);  
    
15.             }
    
16.         }

复制代码

left: 50%;
top: 50%; 在最中间。
opacity：透明。
scale(0.1)；缩小。
100%{…}到对应位置，同时变不透明和放大成正常大小。
9. 一样的，给其它两个勾玉动画：

1. .zuoYu .yu:nth-child(2){
   
2.             animation: yu2 2s ease-in 2s forwards;
   
3.         }
   
4.         @keyframes yu2{
   
5.             0%{
   
6.                 opacity: 0;
   
7.                 left: 50%;
   
8.                 top: 50%;
   
9.                
   
10.                 transform: translate(-50%,-50%) scale(0.1) ;
    
11.             }
    
12.             100%{
    
13.                 top: 60%;
    
14.                 left: -9%;
    
15.                 transform: scale(1) rotate(-60deg);  
    
16.             }
    
17.         }
    
18.         .zuoYu .yu:nth-child(3){         
    
19.             animation: yu3 2s ease-in 2s forwards;
    
20.         }
    
21.         @keyframes yu3{
    
22.             0%{
    
23.                 opacity: 0;
    
24.                 right: 50%;
    
25.                 top: 50%;
    
26.                
    
27.                 transform: translate(-50%,-50%) scale(0.1);
    
28.             }
    
29.             100%{
    
30.                 top: 60%;
    
31.                 right: -9%;
    
32.                 transform: scale(1) rotate(180deg);  
    
33.             }
    
34.         }

复制代码

10.给两个眼睛都设置一个白点，相当于反光效果吧，至此血轮眼做完了：

1. .zuo::before,.you::before{
   
2.             content: '';
   
3.             position: absolute;
   
4.             left: 38%;
   
5.             top: 30%;
   
6.             width: 12px;
   
7.             height: 12px;
   
8.             border-radius: 50%;
   
9.             background-color: rgb(255, 255, 255);
   
10.             z-index: 10;
    
11.         }

复制代码

position: absolute;
left: 38%;
top: 30%; 定位相应的位置。
background-color: rgb(255, 255, 255); 白色。
z-index: 10; 设置为10，显示在最上层。
11.设置轮回眼基本css样式，跟血轮眼一样：

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

复制代码

12.设置眼球宽高等：

1. .you::after{
   
2.             content: '';
   
3.             position: absolute;
   
4.             top: 50%;
   
5.             left: 50%;
   
6.             transform: translate(-50%,-50%);
   
7.             width: 95px;
   
8.             height: 95px;
   
9.             border-radius: 50%;
   
10.             border: 2px solid #000;
    
11.             animation: youcolor 2s linear forwards;
    
12.          }
    
13.          @keyframes youcolor{
    
14.             0%,30%{
    
15.                 background-color: rgb(0, 0, 0);
    
16.             }
    
17.             100%{
    
18.                  background-color: rgb(144, 130, 183);
    
19.             
    
20.              }
    
21.          }

复制代码

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. 设置眼球最中间的黑点，跟血轮眼也差不多：

1. .dian{      
   
2.              position: absolute;
   
3.             top: 50%;
   
4.             left: 50%;              
   
5.             background-color: #000;
   
6.             transform: translate(-50%,-50%);
   
7.             border-radius: 50%;
   
8.             z-index: 10;
   
9.             animation: youda 3s linear forwards;
   
10.          }
    
11.          @keyframes youda{
    
12.              0%{
    
13.                 height: 0px;
    
14.             width: 0px;
    
15.              }
    
16.              100%{
    
17.                 height: 15px;
    
18.             width: 15px;
    
19.              }
    
20.          }

复制代码

14. 设置轮回眼每个圈，同时设置动画让其变大：

1. .youYu{
   
2.             position: absolute;
   
3.           top: 50%;
   
4.           left: 50%;
   
5.           transform: translate(-50%,-50%);
   
6.        }
   
7.        .quan{
   
8.            position: absolute;
   
9.            border-radius: 50%;
   
10.            border: 2px solid #000;
    
11.            z-index: calc(1 - var(--r));
    
12.            animation: zhi 2s ease-out 2s forwards;
    
13.        }
    
14.        @keyframes zhi{
    
15.            0%{
    
16.             top: calc(var(--r) * 1px);
    
17.            left: calc(var(--r) * 1px);
    
18.            right: calc(var(--r) * 1px);
    
19.            bottom: calc(var(--r) * 1px);
    
20.            }
    
21.            100%{
    
22.             top: calc(var(--r) * -35px);
    
23.            left: calc(var(--r) * -35px);
    
24.            right: calc(var(--r) * -35px);
    
25.            bottom: calc(var(--r) * -35px);
    
26. 
    
27.                background-color: rgb(187, 177, 214);
    
28.            }
    
29.        }

复制代码

z-index: calc(1 - var(–r)); 计算，让最开始的圈显示在最上层。
animation：设置动画，让轮回圈慢慢变大，同时变成紫色。
完整代码：

1. <!DOCTYPE html><html lang="zh-CN"><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>Document</title>    <style>        *{            margin: 0;            padding: 0;            box-sizing: border-box;        }        body{            height: 100vh;            display: flex;            justify-content: center;            align-items: center;            background-color: #000;        }        .zuo , .you{
   
2.             width: 250px;
   
3.             height: 120px;
   
4.             background-color: rgb(255, 255, 255);
   
5.             border-bottom: 5px solid rgb(70, 70, 70);
   
6.             overflow: hidden;
   
7.             position: relative;
   
8.         }                 .zuo{
   
9.             transform: translateX(-135px);
   
10.             border-radius: 0 120px 0 120px;
    
11.             box-shadow: inset 3px 2px 3px  rgba(17, 17, 17, 0.8);
    
12.         }        .zuo::after{
    
13.             content: '';
    
14.             position: absolute;
    
15.             top: 50%;
    
16.             left: 50%;
    
17.             transform: translate(-50%,-50%);
    
18.             width: 95px;
    
19.             height: 95px;
    
20.             border-radius: 50%;
    
21.             border: 2px solid #000;
    
22.             animation: colour 2s linear forwards;
    
23.         }
    
24.         @keyframes colour{
    
25.             0%,30%{
    
26.                 background-color: rgb(0, 0, 0);
    
27.             }
    
28.             100%{
    
29.                  background-color: rgb(255, 4, 4);
    
30.              }
    
31.          }        .zuoZong{
    
32.             position: absolute;
    
33.             top: 50%;
    
34.             left: 50%;
    
35.             transform: translate(-50%,-50%);
    
36.             width: 0px;
    
37.             height: 0px;
    
38.             border-radius: 50%;
    
39.             background-color: rgb(0, 0, 0);
    
40.             z-index: 1;
    
41.             animation: da 3s linear forwards;
    
42.         }
    
43.         @keyframes da{
    
44.             100%{
    
45.                 width: 15px;
    
46.             height: 15px;
    
47.             }
    
48.         }        .zuoYu{
    
49.             position: absolute;
    
50.             top: -25px;
    
51.             left: -25px;
    
52.             bottom: -25px;
    
53.             right: -25px;
    
54.             border-radius: 50%;
    
55.             border: 2px solid rgb(0, 0, 0);
    
56.             animation: zhuan 2s linear 2s forwards;
    
57.             opacity: 0;
    
58.         }
    
59.         @keyframes zhuan{
    
60.            
    
61.             100%{
    
62.                 opacity: 1;
    
63.                 transform: rotate(720deg);
    
64.             }
    
65.         }        .zuoYu .yu{
    
66.              position: absolute;
    
67.              width: 15px;
    
68.              height: 15px;
    
69.              border-radius: 50%;
    
70.              background-color: rgb(0, 0, 0);
    
71. 
    
72.         }
    
73.         .zuoYu .yu::after{
    
74.             content: '';
    
75.             position: absolute;
    
76.             top: -6px;
    
77.             left: -1px;
    
78.             width: 6px;
    
79.             height: 20px;
    
80.             border-radius: 50%;
    
81.             border-left: 6px solid rgb(0, 0, 0);
    
82.         }        .zuoYu .yu:nth-child(1){
    
83.             animation: yu1 2s ease-in 2s  forwards;
    
84.         }
    
85.         @keyframes yu1{
    
86.             0%{
    
87.                 opacity: 0;
    
88.                 left: 50%;
    
89.                 top: 50%;               
    
90.                 transform:translate(-50%,-50%)  scale(0.1) ;
    
91.             }
    
92.             100%{
    
93.                 left: 50%;
    
94.                 top: -9%;
    
95.                 transform: scale(1) rotate(80deg);  
    
96.             }
    
97.         }               .zuoYu .yu:nth-child(2){
    
98.             animation: yu2 2s ease-in 2s forwards;
    
99.         }
    
100.         @keyframes yu2{
     
101.             0%{
     
102.                 opacity: 0;
     
103.                 left: 50%;
     
104.                 top: 50%;
     
105.                
     
106.                 transform: translate(-50%,-50%) scale(0.1) ;
     
107.             }
     
108.             100%{
     
109.                 top: 60%;
     
110.                 left: -9%;
     
111.                 transform: scale(1) rotate(-60deg);  
     
112.             }
     
113.         }
     
114.         .zuoYu .yu:nth-child(3){         
     
115.             animation: yu3 2s ease-in 2s forwards;
     
116.         }
     
117.         @keyframes yu3{
     
118.             0%{
     
119.                 opacity: 0;
     
120.                 right: 50%;
     
121.                 top: 50%;
     
122.                
     
123.                 transform: translate(-50%,-50%) scale(0.1);
     
124.             }
     
125.             100%{
     
126.                 top: 60%;
     
127.                 right: -9%;
     
128.                 transform: scale(1) rotate(180deg);  
     
129.             }
     
130.         }        .zuo::before,.you::before{
     
131.             content: '';
     
132.             position: absolute;
     
133.             left: 38%;
     
134.             top: 30%;
     
135.             width: 12px;
     
136.             height: 12px;
     
137.             border-radius: 50%;
     
138.             background-color: rgb(255, 255, 255);
     
139.             z-index: 10;
     
140.         }        .you{            transform: translateX(135px);            border-radius:  120px 0 120px 0;            box-shadow: inset -3px 2px 3px  rgba(17, 17, 17, 0.8);/*             filter: drop-shadow( 8px -5px 3px  rgb(216, 59, 59)); */        }         .you::after{
     
141.             content: '';
     
142.             position: absolute;
     
143.             top: 50%;
     
144.             left: 50%;
     
145.             transform: translate(-50%,-50%);
     
146.             width: 95px;
     
147.             height: 95px;
     
148.             border-radius: 50%;
     
149.             border: 2px solid #000;
     
150.             animation: youcolor 2s linear forwards;
     
151.          }
     
152.          @keyframes youcolor{
     
153.             0%,30%{
     
154.                 background-color: rgb(0, 0, 0);
     
155.             }
     
156.             100%{
     
157.                  background-color: rgb(144, 130, 183);
     
158.             
     
159.              }
     
160.          }                  .dian{      
     
161.              position: absolute;
     
162.             top: 50%;
     
163.             left: 50%;              
     
164.             background-color: #000;
     
165.             transform: translate(-50%,-50%);
     
166.             border-radius: 50%;
     
167.             z-index: 10;
     
168.             animation: youda 3s linear forwards;
     
169.          }
     
170.          @keyframes youda{
     
171.              0%{
     
172.                 height: 0px;
     
173.             width: 0px;
     
174.              }
     
175.              100%{
     
176.                 height: 15px;
     
177.             width: 15px;
     
178.              }
     
179.          }         .youYu{
     
180.             position: absolute;
     
181.           top: 50%;
     
182.           left: 50%;
     
183.           transform: translate(-50%,-50%);
     
184.        }
     
185.        .quan{
     
186.            position: absolute;
     
187.            border-radius: 50%;
     
188.            border: 2px solid #000;
     
189.            z-index: calc(1 - var(--r));
     
190.            animation: zhi 2s ease-out 2s forwards;
     
191.        }
     
192.        @keyframes zhi{
     
193.            0%{
     
194.             top: calc(var(--r) * 1px);
     
195.            left: calc(var(--r) * 1px);
     
196.            right: calc(var(--r) * 1px);
     
197.            bottom: calc(var(--r) * 1px);
     
198.            }
     
199.            100%{
     
200.             top: calc(var(--r) * -35px);
     
201.            left: calc(var(--r) * -35px);
     
202.            right: calc(var(--r) * -35px);
     
203.            bottom: calc(var(--r) * -35px);
     
204. 
     
205.                background-color: rgb(187, 177, 214);
     
206.            }
     
207.        }    </style></head><body>    <!-- 血轮眼 -->
     
208.     <div class="zuo">
     
209.         <!-- 眼睛最中间那个黑点 -->
     
210.         <div class="zuoZong">
     
211.             <!-- 三勾玉所在的圈 -->
     
212.             <div class="zuoYu">
     
213.                 <!-- 三个勾玉 -->
     
214.                 <span class="yu"></span>
     
215.                 <span class="yu"></span>
     
216.                 <span class="yu"></span>
     
217.             </div>
     
218.         </div>
     
219.     </div>
     
220.     <!-- 轮回眼 -->
     
221.     <div class="you">
     
222.         <!-- 眼睛最中间那个黑点 -->
     
223.         <div class="dian"></div>
     
224.              <!-- 3个轮回圈 -->
     
225.             <div class="youYu">                        
     
226.                 <span class="quan" style="--r:2;"></span>
     
227.                 <span class="quan" style="--r:3;"></span>
     
228.                 <span class="quan" style="--r:4;"></span>
     
229.             </div>      
     
230.     </div></body></html>

复制代码

到此这篇关于html+css实现血轮眼轮回眼特效 的文章就介绍到这了,更多相关html血轮眼轮回眼特效 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：互联网
免责声明：如果侵犯了您的权益，请联系站长（1277306191@qq.com），我们会及时删除侵权内容，谢谢合作！