广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章给大家介绍一下使用纯CSS实现血轮眼+轮回眼特效的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所助。
效果（完整代码在底部）
其实实现并不难，都是重复的代码比较多。
实现（可跟着一步一步写）：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> <!-- 3个轮回圈 --> <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); } }登录后复制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样式，跟血轮眼一样：
.zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }0登录后复制12.设置眼球宽高等：
.zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }1登录后复制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. 设置眼球最中间的黑点，跟血轮眼也差不多：
.zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }2登录后复制14. 设置轮回眼每个圈，同时设置动画让其变大：
.zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }3登录后复制完整代码：z-index: calc(1 - var(–r)); 计算，让最开始的圈显示在最上层。 animation：设置动画，让轮回圈慢慢变大，同时变成紫色。
<!DOCTYPE html><html><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)); */ } .zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }1 .zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }2 .zuo , .you{ width: 250px; height: 120px; background-color: rgb(255, 255, 255); border-bottom: 5px solid rgb(70, 70, 70); overflow: hidden; position: relative; }3 </style></head><body> <!-- 血轮眼 --> <div> <!-- 眼睛最中间那个黑点 --> <div> <!-- 三勾玉所在的圈 --> <div> <!-- 三个勾玉 --> <span></span> <span></span> <span></span> </div> </div> </div> <!-- 轮回眼 --> <div> <!-- 眼睛最中间那个黑点 --> <div></div> <!-- 3个轮回圈 --> <div> <span style="--r:2;"></span> <span style="--r:3;"></span> <span style="--r:4;"></span> </div> </div></body></html>登录后复制（学习视频分享：css视频教程）
以上就是纯CSS如何实现血轮眼+轮回眼特效（代码详解）的详细内容，更多请关注9543建站博客其它相关文章！
发表评论