标签：纯纯 rainbow 美美 样式 50% transform 彩虹 shadow css

效果

效果图如下

实现思路

1. 使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起
2. after伪元素写投影样式
3. 彩虹和投影都有动画

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

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

标签：纯纯,rainbow,美美,样式,50%,transform,彩虹,shadow,css
来源： https://blog.csdn.net/bertZuo/article/details/101012239

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。