web前端入门到实战：纯CSS画动态彩虹

html-css012

web前端入门到实战：纯CSS画动态彩虹,第1张

效果图如下

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

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

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

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

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

没有特别的办法，只有一个个字设置，如下

[color=#FF0000]测[/color][color=#FF3200]试[/color][color=#FF6500]彩[/color][color=#FF9700]色[/color][color=#F2C000]字[/color][color=#AFC000]彩[/color][color=#6CC000]色[/color][color=#29C000]字[/color][color=#00C01A]彩[/color][color=#00C05D]色[/color][color=#00C0A1]字[/color][color=#00C0E4]我[/color][color=#00A2FF]是[/color][color=#0070FF]彩[/color][color=#003DFF]色[/color][color=#000BFF]字[/color][color=#3500FF]啦[/color][color=#7800FF]啦[/color][color=#BB00FF]啦[/color][color=#FF00FF]啦[/color]

色彩在设计中是十分重要的，随着设计技术的发展和演变，美丽的渐变色也愈来愈受大家喜爱。但是要迅速地配出满意的渐变色需要不少时间，所以今天给大家分享一些快速生成渐变色的网站，真的非常实用又方便~

ColorSpace

https://mycolor.space/

如果你喜欢渐变风格的创作，那么一定要试试这个网站。你只需要选择一个颜色，就可以快速生成20多种不同风格的配色方案。

比如选择了如图所示的RGB值，就会出现下面25种配色方案。

WebGradients

https://webgradients.com

WebGradients有100多种线性渐变配色方案，网站任何部分的内容背景都可以使用这些配色方案。使用时，只需要轻松复制色值，而且每个渐变色方案都准备了PNG格式的图片可供下载。

GRADIENT BUTTONS

https://gradientbuttons.colorion.co

这个网站里面有很多种渐变色按钮，鼠标移动的时候，可以查看悬停的动画效果。还可以一键复制 css代码，非常方便。

Uigradients

uigradients.com/

Uigradients收藏了将近上百种渐变配色方案，可以说是一个以分享美丽渐变色彩为主的网站。它有几百种渐变配色方案，可以根据自己的需求来选择使用。

CoolHue 2.0

https://webkul.github.io/coolhue/sketch-plugin

Swatch是一款免费的渐变配色插件和收集工具，可以下载使用。

Eggradients

https://www.eggradients.com/

可以叫它「美妆蛋」神器，因为它就是用鸡蛋的形状来展示各种渐变的，很有意思。目前该平台有超过 200 种渐变方案，每一种的色彩都很美丽，建议收藏。

Gradienta

https://gradienta.io/

它是一个免费 CSS 渐变色背景生成工具，且渐变方案完全开源免费，可个人使用也可商用。

超过 100多款精心制作的渐变色背景，并且都可作为 CSS 代码、SVG 和 JPG 图像格式使用。

Mesh Gradient

https://products.ls.graphics/mesh-gradients/

Mesh Gradients提供了超过100套精美渐变色彩，有普通渐变，也有彩虹渐变。

每一个右上角都有一个下载按钮，可以直接下载。格式也不同，包括AI、JPS、PNG等格式。

Cool Background

https://coolbackgrounds.io/

它除了提供渐变色背景图像外，也有多种带纹理的背景图像效果可用。比较适合正式商务风格、成熟风格。

Duotones

https://duotones.co

在这个网站里面上传图片，可以生成双色调效果。如果不喜欢当前效果，还可以调整对比度跟亮度。并且生成的图片可以下载和复制色值。

以上是关于

渐变色网站的收集整理

希望对大家有所帮助