Pure CSS realizes dynamic sunny rain

Yes, it’s that wayward, every move The picture is a label, and there is no picture and no JS! Let’s introduce the technical implementation in detail.

The key CSS3 attributes involved:

1. transform: Use For the effects of shifting, rotating, and zooming
2. box-shadow: use projection to realize image copy (key!)
3. clip-path: masking elements based on the drawn shape
4. animation: set the animation of the element

and the most important thing to realize the single tag: before and after pseudo-element use.

Through sharing in this issue, what can I learn?

The biggest point is: box-shadow’s alternative gameplay-“shadow avatar”.

The following will explain one by one.

p>

2 Basic background

The blue block background area in the picture is very basic, no need to talk about it.

Set the width and height of the area, background color and rounded corners. Effect.

.weather {
 position: relative;
 display: inline-block;
 width: 180px;
 height: 240px;
 background: #23b7e5;
 border-radius: 8px; 
}
Copy code

3 Sunny day

The sunny day icon consists of two elements: the sun and the inner hexagonal sunlight.

The two pseudo-elements:before and :after can “add” an element to the inside of the element, which happens to be used.

3.1 Drawing the sun

First, use :before to realize the sun.

.sunny:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 60px;
 height: 60px;
 background: #F6D963;
 border-radius: 50%; 
 box-shadow: 0 0 20px #ff0;
 z-index: 2;
}
Copy code

content is used to generate an element.

position, top, left, and transform are used to achieve centering of the center.

Box-shadow achieves the external glow effect, this is just the most basic and most common way to use box-shadow.

position: absolute;
top: 50%;
left: 50%;
margin: -45px 0 0 -45px;
width: 90px;
height : 90px;
background: #FFEB3B;
clip-path: polygon(
50% 0%,
64.43% 25%,
93.3% 25%,< br /> 78.87% 50%,
93.3% 75%,
64.43% 75%,
50% 100%,
35.57% 75%,
6.7% 75%,
21.13% 50%,
6.7% 25%,
35.57% 25%);
z-index: 1;
animation: sunScale 2s linear infinite;
}
@keyframes sunScale {
0% {
transform: scale(1);
}
50% {
transform : scale(1.1);
}
100% {
transform: scale(1);
}
}
Copy code

※ Note: safari needs to change clip-path to -webkit-clip-path. Because the code takes up too much space, I won’t repeat it twice here.

position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
z-index: 2;
}
Copy code

position: absolute;
top: 50%;
left: 25%;
transform: translate(-50%, -50%);
width: 36px;
height: 36px;
background: #fff;
border-radius: 50%;
box-shadow:
#fff 22px -15px 0 6px,
#fff 57px -6px 0 2px,
#fff 87px 4px 0- 4px,
#fff 33px 6px 0 6px,
#fff 61px 6px 0 2px,
#ccc 29px -23px 0 6px,
#ccc 64px -14px 0 2px,
#ccc 94px -4px 0 -4px;
z-index: 2;
}
Copy code

White circles with five avatars (#fff), The gray circles (#ccc) of the three clones form two clouds.

Add the motion effect of “floating up and down” to the cloud:

.cloudy:before {
 animation: cloudMove 2s linear infinite;
}
@keyframes cloudMove {
 0% {
 transform: translate(-50%, -50%);
 }
 50% {
 transform: translate( -50%, -60%);
 }
 100% {
 transform: translate(-50%, -50%);
 }
}

Copy code

position: absolute;
top:50%;
left: 25%;
width: 4px;
height: 14px;
background: #fff;
border-radius: 2px;
}
Copy code< /pre>

.rainy:after {
 content: "";
 po sition: absolute;
 top:50%;
 left: 25%;
 width: 4px;
 height: 14px;
 background: #fff;
 border-radius: 2px;
+ box-shadow:
+ #fff 25px -10px 0,
+ #fff 50px 0 0,
+ #fff 75px -10px 0 ,
+ #fff 0 25px 0,
+ #fff 25px 15px 0,
+ #fff 50px 25px 0,
+ #fff 75px 15px 0,
+ #fff 0 50px 0,
+ #fff 25px 40px 0,
+ #fff 50px 50px 0,
+ #fff 75px 40px 0;
 }
Copy code 

We are generating three rows of raindrops, the first row is blocked by clouds, and what we can actually see are the following two rows. When the first row moves to the second row position, the original third row is already transparent and invisible, just the same as the initial state, realizing seamless circular splicing.

6 Snowy days

The difference between snowy days and rainy days is to replace raindrops with circles and cancel the rotation angle. The code is as follows:

.snowy:after {
 content: "";
 position: absolute;
 top:50%;
 left: 25%; 
 width: 8px;
 height: 8px;
 background: #fff;
 border-radius: 50%;
 box-shadow:
 #fff 25px -10px 0,
 #fff 50px 0 0,
 #fff 75px -10px 0,
 #fff 0 25px 0,
 #fff 25px 15px 0,
 #fff 50px 25px 0,
 #fff 75px 15px 0,
 #fff 0 50px 0,
 #fff 25px 40px 0,
 #fff 50px 50px 0,
 #fff 75px 40px 0;
 animation: snowDrop 2s linear infinite; 
}
@keyframes snowDrop {
 0% {
 transform: translateY(0);
 }
 100% {
 transform: translateY(25px);
 box-shadow:
 #fff 25px -10px 0,
 #fff 50px 0 0, 
 #fff 75px -10px 0,
 #fff 0 25px 0,
 #fff 25px 15px 0,
 #fff 50px 25px 0,
 # fff 75px 15px 0,
 rgba(255, 255, 255, 0) 0 50px 0,
 rgba(255, 255, 255, 0) 25px 40px 0,
 rgba(255, 255 , 255, 0) 50px 50px 0,
 rgba(255, 255, 255, 0) 75px 40px 0;
 }
}
Copy code