中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › html+css实现血轮眼轮回眼特效代码

[前端] html+css实现血轮眼轮回眼特效代码

1681 0
黑夜隐士 2022-10-19 15:30:29 | 显示全部楼层 |阅读模式
效果（完整代码在底部）：


实现并不难，都是重复的代码比较多。
实现（可跟着一步一步写）：
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{
  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);
  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%;
  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%;
  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);
  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);
  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.         }
  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.          }
  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{
  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);
  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%;
  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%;
  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%;
  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);
  197.              }
  198.          }
  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);
  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血轮眼轮回眼特效 内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

黑夜隐士

创始人

关注
  • 1051
    主题
  • 329
    粉丝
  • 354
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天