今天小编跟大家讲解下有关纯css实现彩虹效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯css实现彩虹效果 的相关资料，希望小伙伴们看了有所帮助。
效果效果图如下
实现思路使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起after伪元素写投影样式彩虹和投影都有动画dom结构用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写彩虹的样式。
<div class="container"> <div class="rainbow"></div></div>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);[email protected] rainbow{ 50%{ transform: rotate(50deg); }}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%;[email protected] rainbow_shadow{ 50%{ transform: rotate(-50deg) translate(10px) scale(0.7); opacity: 0.05; }}搞定，很简单有没有，跟着实现一遍，你也可以画出美丽的彩虹咯~
来源：爱蒂网
