C C++最全血轮眼轮回眼特效 html+css_轮回眼html，2024年最新已拿意向书

于 2024-05-15 02:04:19 发布
阅读量362 收藏 3
点赞数 3
分类专栏： 程序员 文章标签： c语言 c++ 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84978659/article/details/138879400
版权

img
img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上C C++开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

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>


![img](https://img-blog.csdnimg.cn/img_convert/7b1e6912c647defdf945ad2d66050469.png)
![img](https://img-blog.csdnimg.cn/img_convert/bccd65ebd7e29ef1fb45e7826685629e.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

Zong">
            <!-- 三勾玉所在的圈 -->
            <div class="zuoYu">
                <!-- 三个勾玉 -->
                <span class="yu"></span>


[外链图片转存中...(img-pc5gwDMY-1715709837341)]
[外链图片转存中...(img-nHuHrhdT-1715709837341)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化的资料的朋友，可以添加戳这里获取](https://bbs.csdn.net/topics/618668825)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84978659
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Qt+JavaScript+css+html+C++开发的仿win10的桌面系统支持UKEY实名认证登录/软件中心/软件管理
03-22
基于Qt+JavaScript+css+html+C++开发的仿win10的桌面系统，支持UKEY实名认证登录+软件中心+软件管理，适合毕业设计、课程设计、项目开发。项目源码已经过严格测试，可以放心参考并在此基础上延申使用~ 基于Qt+...
用Python中的Turtle库画万花筒写轮眼
MarkAssassin的博客
01-16 4902
这几天又刷完了一遍火影，中二之魂一下子上来了，于是突发奇想，用python中的。画图库画一个宇智波一族的万花筒写轮眼。这是眼力的战斗，别小看宇智波！内部的3个扇扇，底色为红色；最外面的大圆，底色为黑色；中间的小圆，底色为黑色。
利用canvas画一个万花筒血轮眼的钟表
qq_45477702的博客
12-08 2402
完整代码如下： Document <script> const cvs = document.getElementById("cvs"); const huabi = cvs.getContext("2d"); huabi.translate(300, 300); // 让写轮眼转...
血轮眼轮回眼特效 html+css
热门推荐
你好呀，很高兴你在看这里~
03-27 1万+
效果（完整代码在底部）： 实现并不难，都是重复的代码比较多。 实现（可跟着一步一步写）： 1. 先定义基本标签： <!-- 血轮眼 --> <div class="zuo"> <!-- 眼睛最中间那个黑点 --> <div class="zuoZong"> <!-- 三勾玉所在的圈 --> <div class="zuoYu">
Python绘制万花筒
qq_53352350的博客
11-17 2697
从网上看到的一个挺有好看的图形，也比较简单，设置列表存放颜色元素，在执行一个循环就能完成。 import turtle turtle.setup(1000,700) turtle.pensize(5) color = ['orange','blue','yellow','black','green','tomato'] # 设置自己喜欢的几个颜色 for i in range(350): # 让接下来的代码循环多少次，350次就有不错的效果了，要是前面加入初始化 turtle.penco
用Python写血轮眼
wzr728的博客
11-12 4298
用python写血轮眼 import turtle turtle.title(‘血轮眼’) #画布标题 turtle.bgcolor(“green”) #背景颜色 turtle.pensize(5) #画笔宽度 turtle.speed(100) #海龟移动速度 turtle.fillcolor(“red”) #填充的颜色 turtle.begin_fill() #开始填色 for i in range(4): turtle.circle(80, 50) turtle.circle(20, 180) tur
C_C++函数库查询辞典++（最新版）_11294215
09-27
C_C++函数库查询辞典++（最新版），
RmlUi-HTML / CSS用户界面库得到了发展-C/C++开发
05-26
RmlUi是基于HTML和CSS标准的C ++用户界面程序包，旨在作为满足任何项目界面需求的完整解决方案。 RmlUi-不断发展HTML / CSS用户界面库RmlUi-现在增加了助推器，可以控制火箭，并针对您的游戏和应用程序。 RmlUi是...
Ajax c++ html5中文手册css4.2.4参考手册MySQL 5.1参考手册Javascript参考手册等学习资料合集
02-23
Ajax中文手册c++ html5中文手册css4.2.4参考手册MySQL 5.1参考手册Javascript参考手册等学习资料合集: Ajax中文手册.chm c++中文手册.chm css4.2.4参考手册.chm C语言教程》新CHM版.chm html5中文手册.chm ...
华为C&C++语言安全编程规范_V3.1.pdf
04-12
华为C/C++语言安全编程规范_V3.1
万花筒写轮眼000001
05-03
万花筒写轮眼000001，万花筒写轮眼000001，万花筒写轮眼000001，万花筒写轮眼000001
万花筒（Python）
01-15
万花筒（Python）
一个漂亮的万花筒
02-23
对C++初学者很有帮助
写轮眼进化动画
09-13
写轮眼进化动画
HTML5 网络万花筒
03-23
HTML5 网络万花筒，基于HTML5的canvas制作，文档充足，可以直接当作业上交
css 禁止换行_CSS 的常用属性速查表
weixin_39948111的博客
11-29 238
CSS 的常用属性速查表要想写出优美的 CSS 作品，想象力固然很重要，然而基础也是不可忽略的。常用分类：选择-定位-布局-盒模型-字体-背景-动画-其他SelectorsType元素本身，pClass类，p.classIDid，p#idDescendant后代，ul liAttribute属性，input[type="checkbox"]Sibling相邻元素，input ~ labe...
用python画写轮眼代码,写轮眼c语言代码
神器榜
09-17 2576
z=0&tn=baiduimagedetail&word=%BF%A8%BF%A8%CE%F7%D0%B4%C2%D6%D1%DB&in=11883&cl=2&cm=1&sc=0&lm=-1&pn=6&rn=1&di=1825117740&ln=2000&fr=&ic=0&s=0&se=1我新注册的账号传不了图，只得如此原理和之前的三勾玉一样宇智波斑的比较简单，不解释佐助的嘛……这种写轮眼和普通写轮眼的形状有所区别，一般的写轮眼是三个分开的勾玉，而万花筒写轮眼则有各种不同的形态，且可以使用特别的招式。
Python：修炼写轮眼
TEDxPY
02-16 6438
是的，写轮眼，你没看错，今天周六，修个仙~情人节写的思路通过opencv模块启用电脑摄像头，将拍到的图片利用dlib模块进行面部识别，定位眼球区域，通过PIL模块对写轮眼...
HTML+JS+CSS+MySQL实现学生信息管理系统（采用的C++开发语言）
最新发布
05-22
HTML、JS、CSS、MySQL是Web开发中常用的技术，而C++是一种编程语言，不适合用于Web开发。如果您想使用HTML、JS、CSS、MySQL实现学生信息管理系统，可以考虑使用以下步骤： 1. 创建一个HTML页面，用于展示学生信息和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值