血轮眼轮回眼特效 html+css

你的名字 2022-11-13 14:26 195阅读 0赞

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

![血轮眼][20210327110008103.gif_pic_center]  
实现并不难，都是重复的代码比较多。

## 实现（可跟着一步一步写）： ##

**1. 先定义基本标签：**

<div class="zuo">
            
            <div class="zuoZong">
                
                <div class="zuoYu">
                    
                    <span class="yu"></span>
                    <span class="yu"></span>
                    <span class="yu"></span>
                </div>
            </div>
        </div>
        
        <div class="you">
            
            <div class="dian"></div>
                 
                <div class="youYu">                        
                    <span class="quan" style="--r:2;"></span>
                    <span class="quan" style="--r:3;"></span>
                    <span class="quan" style="--r:4;"></span>
                </div>       
        </div>

**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);
                 }
             }

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. 设置眼球正中间的黑点，都是些定位大小啥的，然后设置动画然它慢慢变大：**

.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);
                }
            }

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. 制作三勾玉，先做一个圆，再用双伪类制作一个圆弧，两者结合就是勾玉了：**

.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);
               }
           }

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

## 完整代码： ##

<!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{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; } .zuo{ transform: translateX(-135px); border-radius: 0 120px 0 120px; box-shadow: inset 3px 2px 3px rgba(17, 17, 17, 0.8); } .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); } } .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; } } .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); } } .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); } .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); } } .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); } } .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; } .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{ 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); } } .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; } } .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); } } </style>
    </head>
    <body>
        
        <div class="zuo">
            
            <div class="zuoZong">
                
                <div class="zuoYu">
                    
                    <span class="yu"></span>
                    <span class="yu"></span>
                    <span class="yu"></span>
                </div>
            </div>
        </div>
        
        <div class="you">
            
            <div class="dian"></div>
                 
                <div class="youYu">                        
                    <span class="quan" style="--r:2;"></span>
                    <span class="quan" style="--r:3;"></span>
                    <span class="quan" style="--r:4;"></span>
                </div>       
        </div>
    </body>
    </html>

## 其它： ##

血轮眼，开~

**其它文章：**  
[炫彩流光文字 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 1]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 2]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 3]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等

热烈宣布（敲锣打鼓，手舞足蹈），我的B站账号地址：https://space.bilibili.com/176586698

~泪目( Ĭ ^ Ĭ )~

[20210327110008103.gif_pic_center]: /images/20221022/f8f32bb3526248c8b092b24b75c9ba98.png
[html_css]: https://blog.csdn.net/luo1831251387/article/details/113838748
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630