单标签！纯CSS实现动态晴阴雨雪

.weather {

position: relative;

display: inline-block;

width: 180px;

height: 240px;

background: #23b7e5;

border-radius: 8px;

}

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

}

.sunny:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

margin: -45px 0 0 -45px;

width: 90px;

height: 90px;

background: #FFEB3B;

clip-path: polygon(50% 0%,

65.43% 25%,

93.3% 25%,

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

}

}

.cloudy:before,

.rainy:before,

.snowy:before {

content: "";

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;

}

.cloudy:before {

animation: cloudMove 2s linear infinite;

}

@keyframes cloudMove {

0% {

transform: translate(-50%, -50%);

}

50% {

transform: translate(-50%, -60%);

}

100% {

transform: translate(-50%, -50%);

}

}

.rainy:after {

content: "";

position: 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;

animation: rainDrop 2s linear infinite;

}

@keyframes rainDrop {

0% {

transform: translate(0, 0) rotate(10deg);

}

100% {

transform: translate(-4px, 24px) rotate(10deg);

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;

}

}

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

}

}

效果图(动态)

image.png