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

}

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

    }

}

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

巴特西

纯纯的css画美美的彩虹

效果

实现思路

dom结构

最新文章

热门文章