纯纯的css画美美的彩虹

zuoWendong 2019-09-19 原文

效果

效果图如下

实现思路

使用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);
}

@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;
    }
}