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

html-css013

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]