html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹

水深无声 2022-10-13 02:24 275阅读 0赞

效果

效果图如下

![8ffab38f6aa9][]

实现思路

使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起

after伪元素写投影样式

彩虹和投影都有动画

dom结构

用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写彩虹的样式。

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

css样式

1、定义父容器样式，控制图标位置，顺便给整个页面加个背景色，方便预览

body\{

background: rgba(73,74,95,1);

\}

.container\{

width: 170px;

height: 170px;

position: relative;

margin: 250px auto;

\}

2、彩虹样式，彩虹有一个左右摇摆的动画效果

.rainbow\{

width: 70px;

height: 70px;

position: absolute;

top: 70px;

left: 80px;

margin-left: -40px;

border-radius: 170px 0 0 0;

box-shadow: \#fb323c -2px -2px 0 1px,

\#f99716 -4px -4px 0 3px,

\#fee124 -6px -6px 0 5px,

\#afde2e -8px -8px 0 7px,

\#6ad7f8 -10px -10px 0 9px,

\#60b1f5 -12px -12px 0 11px,

\#a3459b -14px -14px 0 13px;

animation: rainbow 5s ease-in-out infinite;

transform: rotate(40deg);

\}

@keyframes rainbow\{

50%\{

transform: rotate(50deg);

\}

\}

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法(详细的前端项目实战教学视频，PDF)

3、投影样式，别忘了是同样有动画的哟

.rainbow::after\{

content: '';

width: 120px;

height: 15px;

position: absolute;

bottom: -23px;

left: 17px;

background: \#000;

border-radius: 50%;

opacity: 0.2;

animation: rainbow\_shadow 5s ease-in-out infinite;

transform: rotate(-40deg);

transform-origin: 50% 50%;

\}

@keyframes rainbow\_shadow\{

50%\{

transform: rotate(-50deg) translate(10px) scale(0.7);

opacity: 0.05;

\}

\}

搞定，很简单有没有，跟着实现一遍，你也可以画出美丽的彩虹咯~

[8ffab38f6aa9]: /images/20221005/c3f9c77538cd4284acd49732631c9dd4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关【项目实战】彩虹表rainbow table攻击

彩虹表是一个用于加密散列函数逆运算的预先计算好的表，主要用于破解密码的散列值（或称哈希值、微缩图、摘要、指纹、哈希密文）。这种表常用于恢复由有限集字符组成的固定长度的纯文...

末蓝、/ 2024年05月06日 21:08/ 0 赞/ 50 阅读

相关 css彩虹文字

用CSS3实现彩虹文字的效果，只在Webkit内核的浏览器（谷歌浏览器或移动端）上有效果。 background-image: -webkit-gr

淡淡的烟草味﹌/ 2023年06月04日 04:49/ 0 赞/ 2 阅读

相关 python绘制简单彩虹图_python绘制简单彩虹图

本文实例为大家分享了python绘制彩虹图的具体代码，供大家参考，具体内容如下 ![74eea6df0902428c68de04feb31e779f.png][] 代码：

川长思鸟来/ 2022年11月01日 00:50/ 0 赞/ 227 阅读

相关 html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹

效果效果图如下 ![8ffab38f6aa9][] 实现思路使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起 after伪元素写投影样式彩虹和投影

水深无声/ 2022年10月13日 02:24/ 0 赞/ 276 阅读

相关纯CSS3彩虹加载loading代码

[下载地址][Link 1]纯CSS3彩虹加载loading代码特效，一款使用CSS3绘制的彩虹弹簧式加载效果代码。 ![1631148589.png][] dd: [

墨蓝/ 2022年09月10日 14:23/ 0 赞/ 197 阅读

相关纯 CSS 制作的彩虹条纹文字

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [https://codepen.io/comehope/pen/ELpRxj][htt

左手的ㄟ右手/ 2022年05月25日 13:14/ 0 赞/ 246 阅读

相关纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

![1504257-20181122120838865-641895178.png][] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前

一时失言乱红尘/ 2022年04月15日 05:52/ 0 赞/ 172 阅读

相关如何用纯 CSS 创作彩虹背景文字

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

不念不忘少年蓝@/ 2022年04月13日 03:24/ 0 赞/ 322 阅读

相关 CSS 彩虹字动态彩虹字

1. 静态彩虹字 ![20190514174559622.png][] // html <div class="this-div">Elegant an

川长思鸟来/ 2022年02月01日 14:15/ 0 赞/ 235 阅读

相关彩虹表

一、简介彩虹表就是一个庞大的、针对各种可能的字母组合预先计算好的哈希值的集合，不一定是针对MD5算法的，各种算法的都有，有了它可以快速的破解各类密码。越是复杂的密码，需

﹏ヽ暗。殇╰゛Y/ 2022年01月29日 09:25/ 0 赞/ 254 阅读