纯纯的css画美美的彩虹_融糖_前端开发者

效果

效果图如下

实现思路

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

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

    <div class="container">
        <div class="rainbow"></div>
    </div>

    css样式

    <div class="container">
        <div class="rainbow"></div>
    </div>
    <div class="container">
        <div class="rainbow"></div>
    </div>

    <div class=”container”><div class=”rainbow”></div></div>

    css样式

    css样式

    1、定义父容器样式,控制图标位置,顺便给整个页面加个背景色,方便预览

    body{
        background: rgba(73,74,95,1);
    }
    
    .container{
        width: 170px;
        height: 170px;
        position: relative;
        margin: 250px auto;
    }

    2、彩虹样式,彩虹有一个左右摇摆的动画效果

    body{
        background: rgba(73,74,95,1);
    }
    
    .container{
        width: 170px;
        height: 170px;
        position: relative;
        margin: 250px auto;
    }
    body{
        background: rgba(73,74,95,1);
    }
    
    .container{
        width: 170px;
        height: 170px;
        position: relative;
        margin: 250px auto;
    }

    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{
        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);
        }
    }
    .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);
        }
    }

    .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::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::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::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画美美的彩虹_融糖_前端开发者》
    » 本文链接地址:https://www.rokub.com/73243.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!