用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写彩虹的样式。
1、定义父容器样式，控制图标位置，顺便给整个页面加个背景色，方便预览
2、彩虹样式，彩虹有一个左右摇摆的动画效果
3、投影样式，别忘了是同样有动画的哟
搞定，很简单有没有，跟着实现一遍，你也可以画出美丽的彩虹咯~
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<title></title>
<style>
#rainbow
{
background: transparent
position: relative
height:100px
width:200px
overflow: hidden
}
#rainbow:before
{
content: ""
position:absolute
display: inline-block
background: transparent
bottom:-20px
left:50%
margin-left: -25px
height:50px
width:50px
border-radius: 50%
box-shadow: 0 0 0 3px rgb(139, 0, 255),
0 0 0 6px rgb(0, 0, 255 ),
0 0 0 9px rgb(0, 127, 255),
0 0 0 12px rgb(0, 255, 0),
0 0 0 15px rgb(255, 255, 0),
0 0 0 18px rgb(255, 165, 0),
0 0 0 21px rgb(255, 0, 0)
}
</style>
<body>
<div id="rainbow"></div>
</body>
</html>
没有特别的办法，只有一个个字设置，如下[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]
