写轮眼

最新推荐文章于 2023-09-14 17:12:31 发布
置顶 最新推荐文章于 2023-09-14 17:12:31 发布
阅读量770 收藏 4
点赞数 3
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48292956/article/details/116226048
版权

其他网站看到的，觉得还不错，挺有意思的，就分享给大家吧
先看效果吧：
在这里插入图片描述

代码：

<!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>写轮眼</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>
        <!-- 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>
</body>

</html>
纵有千般好
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
写轮眼python代码_Presentation Ninja 幻灯忍者 · 写轮眼
weixin_40000702的博客
12-24 4万+
xaringan [ʃaː.'riŋ.ɡan] An R package for creating slideshows with remark.js through R Markdown. The package name xaringan comes from Sharingan, a dōjutsu in Naruto with two abilities: the "Eye of Ins...
android写轮眼,打造iOS般流畅的安卓 神器写轮眼使用教程
weixin_29534399的博客
05-27 1607
原标题：打造iOS般流畅的安卓 神器写轮眼使用教程 (网络图片)自安卓诞生之初，它和iOS就好像走在两个极端的劲敌，无论是外在的设计还是内在的理念都有着面显的分歧，就好比《星球大战》里面的银河共和国和银河帝国，两者针锋相对，无时无刻都在竞争。 (网络图片)但安卓系统的开放性带来极大的便利之余也带来了不少问题，同样是同年份的手机，安卓手机用久了往往不及iPhone那么流畅，虽说现在iOS也没有以前那...
万花筒写轮眼画法_万花筒写轮眼怎么画?
热门推荐
weixin_33397994的博客
02-05 1万+
大神是永远都存在的，相信大家一定都有看过热血的日漫火影忍者!那么其中各位忍者的写轮眼也是受到了很多的人的关注，有一部分的漫迷们都想要知道万花筒写轮眼是怎样画的，露西今天就为大家搜罗了一位大神!来看看大神是怎样画万花筒写轮眼的吧!漫画《火影忍者》中的一种瞳术，六道仙人长子因陀罗的后裔宇智波一族的血继限界， [1]可以通过强烈情绪刺激开眼并不断进化，在经历亲近之人去世之后可进化为万花筒写轮眼。亲兄弟之...
html写轮眼动画效果,写轮眼动态效果图 如何自己制作写轮眼变轮回眼动态图？...
weixin_29746595的博客
06-04 2181
写轮眼是动漫火影忍者里的一种瞳术，很多火影迷都被写轮眼所迷倒过，今天小编将给大家带来写轮眼GIF图片制作方法。温馨提示：此篇教程需要在小编昨天写的火影忍者写轮眼图片的基础上进行操作哦，大家可以点击火影忍者写轮眼图片跳转到该教程方案。昨天小编介绍的是制作写轮眼静态图片，当然，今天来要介绍的是制作动态的写轮眼图片啦，就是可以变化的写轮眼图片哦。好啦，废话不多说，起来看看如何制作写轮眼动态图吧！首先，我...
vue3+scss开启写轮眼
weixin_43575792的博客
09-14 499
要绘制一个勾玉，先对勾玉的形状进行分析，它是由一个圆和一个勾组成，因此我们可以使用css中的伪类来实现。首先我们根据需要 将眼睛的基础形状描绘出来，基础形状是由外眼线、内眼线以及中间的瞳孔组成。要实现勾玉绕瞳孔旋转的效果，我们可以使用css3中的动画实现。采用vue3+vite+scss的技术内容进行开发。定义一个div，类名为gouyu。结合二者即可实现以下效果，
html写轮眼动画效果,纯css3制作写轮眼开眼及进化过程
weixin_39632057的博客
06-04 585
1 *{margin:0;padding:0;}2 .container{width:750px;height:200px;margin:30px auto;overflow:hidden;background:#000;position:relative;}3 .eyesBoxs{width:130px;height:70px;position:absolute;top:50px;}4 .pul...
用python画万花筒写轮眼_万花筒写轮眼画法教程
weixin_35426022的博客
01-14 6975
很多喜欢动漫的朋友看过火影忍者，绘画吧觉得火影忍者里的写轮眼很酷，那么万花筒写轮眼怎么画?绘画吧学画画网给大家带来万花筒写轮眼画法教程，有兴趣的一起来学习今天的漫画教程吧。说起火影忍者中的眼睛那么强大的万花筒写轮眼应该是最酷炫的了。绘画吧中二病的时候都希望自己能有一双这样强大神奇的眼睛。虽然我们不能真的拥有写轮眼，但是我们可以用画画的方式来画一双写轮眼，下面一起来看万花筒写轮眼的画法。画万花筒写轮...
盘点火影中写轮眼谁最强
Flucitne的博客
10-18 2948
在火影忍者中，宇智波家族是最强的家族，他们有着强大的瞳术写轮眼。在他们家族中，写轮眼就是他们的象征，在动漫后期才知道写轮眼的力量是非常黑暗的，强大的写轮眼会吞噬他们的心灵，最后他们就会出现暴走的现象，这也是二代火影扉间讨厌宇智波家族的原因。其实宇智波家族是爱的最深的家族，他们的爱都超过了常人，当他们看到至亲的离去就会开始万花筒写轮眼，在火影中一共出现了十一位写轮眼的人物，他们都成为了忍界著名的忍者，就和小编看看十一位写轮眼使用者的实力排名吧。 Top11：宇智波佐良娜，佐良娜是佐助和小樱的女儿，她是博人传中
用CSS做出写轮眼变化图
curry_xiao的博客
05-03 514
在抖音上刷到过一次写轮眼的变化视频，想试试CSS里的动画是否也能做出这种效果。 我想到的做法是，将所有的写轮眼图片叠加放到一起。然后通过动画，将最上面的眼睛旋转并消失，第二只眼睛就显示出来了。
写轮眼app汉化版
08-22
My Android Tool，俗称《写轮眼》，也是名叫《禁用服务》的应用升级版。这款安卓神器能极大的优化你的手机，甚至让你的手机接近、达到甚至超越同期的iOS设备。写轮眼现在既可禁用服务又能禁用自启。它的工作原理是从...
js特效 写轮眼
07-23
在Web开发领域，JavaScript特效的运用极大地提升了用户体验，其中“写轮眼”是一种形象的比喻，通常指的是利用JavaScript实现的一种动态视觉效果，比如网页元素的动画、交互或者模拟现实中的某些视觉现象。...
纯CSS3实现写轮眼进化动画特效.zip
07-08
"纯CSS3实现写轮眼进化动画特效"是一个创新性的项目，它利用了CSS3的特性来创建一个动态的、引人入胜的动画效果，灵感来自于日本动漫《火影忍者》中的“写轮眼”这一角色特征。 写轮眼是火影忍者世界中的一种神秘瞳...
写轮眼进化动画
09-13
在IT行业中，我们通常不会直接将“写轮眼进化动画”与技术知识关联，因为这更倾向于动漫《火影忍者》中的概念。不过，我们可以从这个标题出发，探讨一下与动画制作、数字媒体技术和编程相关的知识。 首先，动画制作...
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
01-19
本文实例讲述了纯css3制作的火影忍者中写轮眼开眼至轮回眼及进化过程实现方法。分享给大家供大家参考。具体分析如下： 今天是火影忍者（漫画）宣告完结的日子。看过火影的朋友都知道，写轮眼是什么，这里就不多说了...
[毕业设计]VB.NET网络聊天应用开发及其优化(源代码+论文+开题报告+答辩PPT).zip
08-03
[毕业设计]VB.NET网络聊天应用开发及其优化(源代码+论文+开题报告+答辩PPT)
带直播电商功能，可以DIY前端，可以H5和小程序一般商城常用功能齐全
08-03
第一次接触这个系统，感觉和微擎有点像。也是一个主体，也很多插件的那种。 测试了下。安装成功了，站长亲测没有问题，一切都挺完善的，不过系统比较庞大，可能新手熟悉起来要一定的过程。 站长整理了一份简要的搭建说明，以及调试说明。
RT-Thread温湿度检测示例
08-03
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
ChatGPT研究框架.pptx
最新发布
08-03
ChatGPT研究框架.pptx
python画图写轮眼
10-13
以下是使用Python绘制轮廓为黑色、瞳孔为红色的写轮眼的代码： ```python import matplotlib.pyplot as plt import numpy as np # 创建一个大小为6x6的画布 fig, ax = plt.subplots(figsize=(6, 6)) # 绘制白色背景 ax.set_facecolor('white') # 绘制黑色轮廓 circle1 = plt.Circle((0, 0), 2.5, color='black', fill=False, linewidth=3) ax.add_artist(circle1) # 绘制红色瞳孔 circle2 = plt.Circle((0, 0), 1, color='red', fill=True) ax.add_artist(circle2) # 隐藏坐标轴 ax.set_xticks([]) ax.set_yticks([]) # 显示图像 plt.show() ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值