An example of how to write a big sun weather icon in pure CSS

Effect

The effect diagram is as follows

Implementation ideas

Div realizes a rectangular light and shadow of the sun
The before pseudo-element creates another light and shadow rectangle, shifting 90 degrees from the existing one
The after pseudo-element draws a circle to achieve the sun style

DOM structure

Use two nested div containers. The parent container controls the position of the icon display, and the child container is used to write the style of the sun's light and shadow rectangle.

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

CSS Styles

1. Define the parent container style, control the icon position, and 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. Light and shadow rectangular style, with a 360° rotating animation

.sunny{
    width: 20px;
    height: 140px;
    position: absolute;
    top: 20px;
    left: 90px;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    animation: sunny 15s linear infinite;
}

@keyframes sunny {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

3. Write another vertical light and shadow rectangle

.sunny::before{
    content: '';
    width: 20px;
    height: 140px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(90deg)
}

4. The style of the sun circle

.sunny::after{
    content: '';
    width: 80px;
    height: 80px;
    position: absolute;
    top: 30px;
    left: -30px;
    background: #ffee44;
    border-radius: 50%;
    box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: td width problem when td cells are merged

>>: Why Google and Facebook don't use Docker