纯css实现乌云密布的天气图标_亦心_前端开发者

效果

效果如下

实现思路

  1. 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案
  2. after伪元素写乌云下的投影
  3. 增加动画
  • 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案
  • after伪元素写乌云下的投影
  • 增加动画
  • dom结构

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

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

     

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

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

     

    css样式

    1、父容器样式,顺便给整个页面加一个背景色,方便预览

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

    body
    background
    rgba(73, 74, 95, 1)

    .container
    width
    170px
    height
    170px
    position
    relative
    margin
    250px auto

    2、乌云的样式,乌云有一个上下移动的动画。这儿关键是box-shadow属性的使用,白色的话就可以当作多云的天气图标啦~

    .cloudy{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 70px;
        left: 80px;
        margin-left: -60px;
        background: #ccc;
        border-radius: 50%;
        box-shadow: #ccc 65px -10px 0 -5px,
            #ccc 25px -25px,
            #ccc 30px 10px,
            #ccc 60px 15px  0 -10px,
            #ccc 85px 5px 0 -5px;
        animation: cloudy 5s ease-in-out infinite;
    }
    
    @keyframes cloudy{
        50%{
            transform: translateY(-20px);
        }
    }

    .cloudy{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 70px;
        left: 80px;
        margin-left: -60px;
        background: #ccc;
        border-radius: 50%;
        box-shadow: #ccc 65px -10px 0 -5px,
            #ccc 25px -25px,
            #ccc 30px 10px,
            #ccc 60px 15px  0 -10px,
            #ccc 85px 5px 0 -5px;
        animation: cloudy 5s ease-in-out infinite;
    }
    
    @keyframes cloudy{
        50%{
            transform: translateY(-20px);
        }
    }
    .cloudy{
        width: 50px;
        height: 50px;
        position: absolute;
        top: 70px;
        left: 80px;
        margin-left: -60px;
        background: #ccc;
        border-radius: 50%;
        box-shadow: #ccc 65px -10px 0 -5px,
            #ccc 25px -25px,
            #ccc 30px 10px,
            #ccc 60px 15px  0 -10px,
            #ccc 85px 5px 0 -5px;
        animation: cloudy 5s ease-in-out infinite;
    }
    
    @keyframes cloudy{
        50%{
            transform: translateY(-20px);
        }
    }

    .cloudy
    width
    50px
    height
    50px
    position
    absolute
    top
    70px
    left
    80px
    margin-left
    -60px
    background
    #ccc
    border-radius
    50%
    box-shadow
    #ccc 65px -10px 0 -5px,
    #ccc 25px -25px,
    #ccc 30px 10px,
    #ccc 60px 15px 0 -10px,
    #ccc 85px 5px 0 -5px

    animation
    cloudy 5s ease-in-out infinite

    @keyframes cloudy
    50%{
    transform
    translateY(-20px)
    }

    3、投影的样式,可以使用after伪元素,别忘了同样是有移动动画的

    .cloudy::after{
        content: '';
        width: 120px;
        height: 15px;
        position: absolute;
        bottom: -60px;
        left: 5px;
        background: #000;
        border-radius: 50%;
        opacity: 0.2;
        animation: cloudy-shadow 5s ease-in-out infinite;
        transform: scale(0.7);
    }
    
    @keyframes cloudy-shadow{
        50%{
            transform: translateY(20px) scale(1);
            opacity: 0.05;
        }
    }

     

    .cloudy::after{
        content: '';
        width: 120px;
        height: 15px;
        position: absolute;
        bottom: -60px;
        left: 5px;
        background: #000;
        border-radius: 50%;
        opacity: 0.2;
        animation: cloudy-shadow 5s ease-in-out infinite;
        transform: scale(0.7);
    }
    
    @keyframes cloudy-shadow{
        50%{
            transform: translateY(20px) scale(1);
            opacity: 0.05;
        }
    }
    .cloudy::after{
        content: '';
        width: 120px;
        height: 15px;
        position: absolute;
        bottom: -60px;
        left: 5px;
        background: #000;
        border-radius: 50%;
        opacity: 0.2;
        animation: cloudy-shadow 5s ease-in-out infinite;
        transform: scale(0.7);
    }
    
    @keyframes cloudy-shadow{
        50%{
            transform: translateY(20px) scale(1);
            opacity: 0.05;
        }
    }

    .cloudy::after
    content

    width
    120px
    height
    15px
    position
    absolute
    bottom
    -60px
    left
    5px
    background
    #000
    border-radius
    50%
    opacity
    0.2
    animation
    cloudy-shadow 5s ease-in-out infinite
    transform
    scale(0.7)

    @keyframes cloudy-shadow
    50%{
    transform
    translateY(20px) scale(1)
    opacity
    0.05
    }

     

    OK,搞定。按着步骤来,你也可以在你的页面上实现乌云的天气图标咯~

    » 本文来自:前端开发者 » 《纯css实现乌云密布的天气图标_亦心_前端开发者》
    » 本文链接地址:https://www.rokub.com/73191.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!