经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
html+css实现血轮眼轮回眼特效代码_HTML/Xhtml
来源：jb51　　时间：2021/4/6 9:27:56　　对本文有异议

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

血轮眼

实现并不难，都是重复的代码比较多。

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

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

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号