css彩虹·,web前端入门到实战：纯CSS画动态彩虹

效果

效果图如下

实现思路

使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起

after伪元素写投影样式

彩虹和投影都有动画

dom结构

用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写彩虹的样式。

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法

(从零基础开始到前端项目实战教程，学习工具，职业规划)

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);

}

}

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法

(从零基础开始到前端项目实战教程，学习工具，职业规划)

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;

}

}

搞定，很简单有没有，跟着实现一遍，你也可以画出美丽的彩虹咯~