Pure CSS to achieve cloudy weather icon effect

Effect

The effect is as follows

​

Implementation ideas

1. Use the box-shadow property to draw several gray circles and combine them together to form a dark cloud pattern.
2. after pseudo-element writes the shadow under the dark clouds
3. Add animation

DOM structure

Use two nested div containers. The parent container controls the display position of the icon, and the child container is used to write the style of the dark clouds.

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

CSS Styles

1. Parent container style, add a background color to the entire page for easy preview

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

2. The style of dark clouds, the dark clouds have an animation of moving up and down. The key here is the use of the box-shadow property. If it is white, it can be used as a cloudy weather icon.

.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. For the projection style, you can use the after pseudo element. Don’t forget that there is also a moving animation.

.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, done. Follow the steps and you can also implement the cloudy weather icon on your page~

Summarize

The above is the pure CSS that I introduced to you to achieve the cloudy weather icon effect. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!