效果
效果图如下
实现思路
- 使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起
- after伪元素写投影样式
- 彩虹和投影都有动画
东莞vi设计https://www.houdianzi.com/dgvi/ 豌豆资源网站大全https://55wd.com
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); } @keyframes 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%; } @keyframes rainbow_shadow{ 50%{ transform: rotate(-50deg) translate(10px) scale(0.7); opacity: 0.05; } }搞定，很简单有没有，跟着实现一遍，你也可以画出美丽的彩虹咯~