Effect

The results are as follows.

Implementation ideas

1. Write several circles using box-shadow attributes, and combine these circles together to form cloud patterns.
2. after pseudo-elements write the following projection style
3. before Pseudo Elements Write Yellow Lightning Styles

dom structure

With two nested div containers, the parent container controls the location of the icon display and the child container writes the black cloud style. The shadows and lightning patterns are all pseudo-elements, which are defined in css.

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

css Style

css is implemented step by step

1. Write the parent container style first. Incidentally, add a background color to the whole page for easy preview.

body{
    background: rgba(73,74,95,1);
}

.container{
    width: 170px;
    height: 170px;
    position: relative;
    margin: 250px auto;
}

2. Write about the black clouds. Don't forget that the black clouds have an animation effect of moving up and down.

.stormy{
    width: 50px;
    height: 50px;
    position: absolute;
    left: 80px;
    top: 70px;
    margin-left: -60px;
    background: #222;
    border-radius: 50%;
    box-shadow: #222 64px -15px 0 -5px,
        #222 25px -25px,
        #222 30px 10px,
        #222 60px 15px 0 -10px,
        #222 85px 5px 0 -5px;
    animation: stormy 5s ease-in-out infinite;
}

@keyframes stormy{
    50%{
        transform: translateY(-20px);
    }
}

3. Shadow style is also animated.

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

@keyframes stormy_shadow{
    50%{
        transform: translateY(20px) scale(1);
        opacity: 0.05;
    }
}

4. Lightning patterns

.stormy::before{
    display: block;
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 57px;
    top: 70px;
    border-left:  0px solid transparent;
    border-right: 7px solid transparent;
    border-top: 43px solid yellow;
    box-shadow: yellow -7px -32px;
    transform:  rotate(14deg);
    transform-origin: 50% -60px;
    animation: stormy_thunder 2s steps(1, end) infinite;
}

@keyframes stormy_thunder{
    0%{
        transform: rotate(20deg);
        opacity: 1;
    }
    5%{
        transform: rotate(-34deg);
        opacity: 1;
    }
    10%{
        transform: rotate(0deg);
        opacity: 1;
    }
    15%{
        transform: rotate(-34deg);
        opacity: 0;
    }
}

The small partners who are interested in the web front end technology can join in our learning circle, and have worked for sixth years. 767-273-102 autumn skirt. How to learn the front-end from the zero foundation? Look at how our predecessors went ahead in the world of programming! Constantly updating the latest tutorials and learning methods (WEB front-line system learning route, detailed front-end project practical teaching video), want to learn web front-end, or change careers, or college students, and work to improve their ability, learning small partners welcome to add. We'll go with each other. Front-end, front-end, front-end

OK, get it done. Step by step, you can also achieve the cool lightning and thunderstorm icon on your page.