效果
效果圖如下
實現思路
- 使用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; } }搞定，很簡單有沒有，跟着實現一遍，你也可以畫出美麗的彩虹咯~