我实现了客户要求的五彩斑斓的黑！！！

五彩斑斓的黑？？？？五彩斑斓？？？还黑？？之前只是笑笑就过去了。。那么能不能实现呢，，，今天他来了！！！

效果图:展示出来的效果颜色和光晕的颜色都是用c3写成的动画效果，由于不支持上传视频，就截了几帧的图片，有想要自己实现这个动画效果的，最后代码附上（超级简单）！

动画的实现原理主要就是色相的反转和光晕模糊度的设置

代码：

html代码：

<body><div class="outer"><div class="inner"></div><span></span><span></span><span></span><span></span></div>
</body>

css代码:

body {display: flex;justify-content: center;align-items: center;background-color: #2a3137;min-height: 100vh;
}
.outer {position: relative;height: 200px;width: 200px;background: linear-gradient(#14ffe0,#ffeb3b,#ff00e0);border-radius: 50%;animation: rotate 1.5s linear infinite;
}
.inner {position: absolute;height: 180px;width: 180px;background: black;top: 10px;left: 10px;border-radius: 50%;z-index: 9;
}
@keyframes rotate {0%{filter: hue-rotate(0deg);}100%{filter: hue-rotate(360deg);}
}
.outer span {position: absolute;height: 200px;width: 200px;background: linear-gradient(#14ffe0,#ffeb3b,#ff00e0);border-radius: 50%;
}
span:nth-child(1) {filter: blur(5px);
}
span:nth-child(2) {filter: blur(10px);
}
span:nth-child(3) {filter: blur(45px);
}
span:nth-child(4) {filter: blur(150px);
}

我实现了客户要求的五彩斑斓的黑！！！相关推荐

“请给我一个五彩斑斓的黑”，只需一行命令就能让AI画画，OpenAI的Dall-E被大神复现...
晓查发自凹非寺量子位报道 | 公众号 QbitAI OpenAI今年1月公布的Dall-E可谓艳惊四座,只需输入一段话,就能根据内容输出一幅画.连吴恩达老师都不禁点赞. 比如让它设计一个&q ...
聊聊旷厂黑科技 | 五彩斑斓的黑，旷视“算”出来了！
五彩斑斓的黑,本是一个网络热梗, 但是凡事就怕认真, 旷视就用 AI 算法把这道题给"算"出来了. 或许很多老法师都知道,用一台相机和一枚大光圈镜头就可以很轻松的拍出这样五彩斑斓 ...
【JS】console.log()打印出五彩斑斓的黑
逛B站不小心点到了F12,于是乎看到了蓝色的小电视,于是乎了解了一下先大致说一下语法: console.log('%c巴拉%c巴拉','color:#fff','color:#000'); //上述 ...
如何在命令行中显示五彩斑斓的“黑”
1. 前言大部分 coder 已经习惯了命令行枯燥的黑底白字,而且任何编程语言入门的第一行代码都是教我们如何在标准输出(大部分情况就是命令行终端或控制台)打印一行"非黑即白"的 ...
彩屏显示入门：我要五彩斑斓的黑 | 用Arduino玩转ESP32与掌控板系列
众所周知,掌控板在创客教育中用的非常广泛,它是一块基于 ESP32 的学习开发板.大家对掌控板编程,用的比较多的都是图形化编程的方式,比如 mPython.Mind+ 等.但是,既然掌控板是基于 ES ...
vivox27怎么去掉信息红点_还记得五彩斑斓的黑？vivo X27 Pro获红点奖
还记得"五彩斑斓的黑",vivo曾将这个让无数设计师抓狂的设计灵感,用到了2019年年度产品的外观设计上.而据数码博主的爆料,vivo X27 Pro确认拿到了德国iF Desig ...
教你用 python 制作一张五彩斑斓的黑
先看效果: 基本构想:在黑色背景中随机填充稀薄的彩色像素点主要流程: 先创建 512 x 512的画布,背景设为不透明的纯黑色再在这个512 x 512 个像素点里按照一定的概率随机挑选像素点 m ...
python黑科技-五彩斑斓的黑
教你用 python 制作一张五彩斑斓的黑 https://blog.csdn.net/phenhorlin2/article/details/103510254 专为程序员设计的数学课 https: ...
nodejs 打印五彩斑斓的黑
前言笔者上一篇博客 <如何在命令行中显示五彩斑斓的"黑">,讲到了任何编程都可以在命令行终端打印彩色字体和彩色背景的文字,以及一些简单文本格式(粗体,下划线,闪烁,反 ...

我实现了客户要求的五彩斑斓的黑！！！

我实现了客户要求的五彩斑斓的黑！！！相关推荐

最新文章

热门文章