天气动画

上图：

HTML:

<p></p>
<div></div>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>

CSS:

body{
width: 100px;
height: 100px;
background: #fb74ba;
}
p{
width: 80px;
height: 80px;
background: #fbf108;
border-radius:50%;
box-shadow: 0px 0px 3px 15px rgba(255,255,0,0.3);
display:inline-block;
position: relative;
margin:100px;
}
p:before{
content: "";
display: inline-block;
width: 20px;
height: 130px;
background: #fff;
opacity:0.1;
transform:rotate(0deg);
position: absolute;
top: -25px;
left: 30px;
}
p:after{
content: "";
display: inline-block;
width: 20px;
height: 130px;
background: #fff;
opacity:0.1;
transform:rotate(90deg);
position: absolute;
top: -25px;
left: 30px;
}
p{
animation-name: qing;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}
@keyframes qing{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(180deg);
}
100%{
transform:rotate(360deg);
}
}
div{
width: 100px;
height: 50px;
background: #fff;
border-radius:50px 50px 50px 50px;
display:inline-block;
margin:50px;
position: relative;
animation-name: yunshang;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
div:before{
content: "";
display: inline-block;
width: 93px;
height: 35px;
background: #fff;
border-radius:57px 50px 50px 50px;
box-shadow:0px -27px 0px -8px #fff;
display:inline-block;
transform:rotate(82deg);
position: absolute;
top:5px;
left: -2px;
}
div:after{
content: "";
display: inline-block;
width: 80px;
height:33px;
background: rgba(0,0,0,0.3);
border-radius:57%;
filter:blur(2px);
display:inline-block;
position: absolute;
top:147px;
left: 7px;
animation-name: yun;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;

}
@keyframes yunshang{
0%{
transform:translate(0,50px);
}
50%{
transform:translate(0,40px);
}
100%{
transform:translate(0,50px);
}
}
@keyframes yun{
0%{opacity:1;
}
50%{opacity:0;
}
100%{opacity:0.5;
}
}
/*下雨*/
h1{
width: 100px;
height: 50px;
background: #ccc;
border-radius:50px 50px 50px 50px;
display:inline-block;
margin:100px;
position: relative;
animation-name: yunshang;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
h1:before{
content: "";
display: inline-block;
width: 93px;
height: 35px;
background: #ccc;
border-radius:57px 50px 50px 50px;
box-shadow:0px -27px 0px -8px #ccc;
display:inline-block;
transform:rotate(82deg);
position: absolute;
top:5px;
left: -2px;
}h1:after{
content: "";
display: inline-block;
width: 3px;
height: 9px;
background: rgba(0,0,0,0.3);
border-radius:50%;
box-shadow:58px 2px 0px 0px rgba(0,0,0,0.3),
28px 16px 0px 0px rgba(0,0,0,0.3),
18px 8px 0px 0px rgba(0,0,0,0.3),
38px 10px 0px 0px rgba(0,0,0,0.3),
58px 22px 0px 0px rgba(0,0,0,0.3),
28px 36px 0px 0px rgba(0,0,0,0.3),
8px 28px 0px 0px rgba(0,0,0,0.3),
38px 40px 0px 0px rgba(0,0,0,0.3);
display:inline-block;
position: absolute;
top:20px;
left: 17px;
animation-name: yudian;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes yudian{
0%{
transform:translate(0,10px);
}
50%{
transform:translate(0,40px);
}
100%{
transform:translate(0,80px);
}
}
@keyframes yunshang{
0%{
transform:translate(0,50px);
}
50%{
transform:translate(0,40px);
}
100%{
transform:translate(0,50px);
}
}h2{
position: relative;
}
h2:before{
content: "";
width: 50px;
height: 50px;
margin:100px;
border-top-left-radius: 100%;
border-top: 5px solid #f00;
border-left: 5px solid #f00;
box-shadow:-2px -2px 0px 2px #e27a10,
-4px -4px 0px 4px #f4ee0f,
-6px -6px 0px 6px #0f0,
-8px -8px 0px 8px #0ff4b7;
transform: rotate(45deg);
animation-name: caihong;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
position: absolute;
top:0px;
left: 0px;

}
@keyframes caihong{
0%{
transform:rotate(60deg);
}
50%{
transform:rotate(45deg);
}
100%{
transform:rotate(60deg);
}
}
h2:after{
content: "";
display: inline-block;
width: 80px;
height:33px;
background: rgba(0,0,0,0.3);
border-radius:57%;
filter:blur(2px);
display:inline-block;
position: absolute;
top:175px;
left: 80px;
animation-name:caiying1;
animation-duration: 1.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes caiying1{
0%{
opacity:1;
}
50%{
opacity:0;
}
100%{
opacity:0.5;
}
}
h3{

width: 100px;
height: 100px;
margin:200px;
border-radius:50%;
border-top: 20px solid #fff;
/*box-shadow:-2px -2px 0px 2px #e27a10,*//*
-4px -4px 0px 4px #f4ee0f,
-6px -6px 0px 6px #0f0,
-8px -8px 0px 8px #0ff4b7;*/
transform: rotate(-90deg);
animation-name: yueliang;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
position: relative;
}
@keyframes yueliang{
0%{
transform:rotate(-110deg);
}
50%{
transform:rotate(-90deg);
}
100%{
transform:rotate(-110deg);
}
}
h3:before{
content: "";
width: 3px;
height: 3px;
background: #fff;
display: inline-block;
position: absolute;
top: -15px;
left: 7px;
box-shadow:58px 52px 0px 0px #fff,
28px 36px 0px 0px #fff,
18px -18px 0px 0px #fff,
58px 18px 0px 0px #fff,
38px 60px 0px 0px #fff;
animation-name: yueliangx1;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
h3:after{
content: "";
width: 3px;
height: 3px;
background: #fff;
display: inline-block;
position: absolute;
top: -15px;
left: 7px;
box-shadow:
98px 22px 0px 0px #fff,
68px -26px 0px 0px #fff,
48px 28px 0px 0px #fff,
38px -10px 0px 0px #fff;
animation-name: yueliangx2;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes yueliangx2{
0%{
opacity:1;
}
50%{
opacity:0;
}
100%{
opacity:0.5;
}
}
@keyframes yueliangx1{
0%{
opacity:0;
}
50%{
opacity:0.5;
}
100%{
opacity:1;
}
}
/*闪电*/
h4{
width: 50px;
height: 50px;
background: #000;
border-radius:50px 50px 50px 50px;
display:inline-block;
margin:100px;
box-shadow: 65px 0px 0px 0px #000,50px 0px 0px 0px #000,10px -28px 0px -5px #000,20px 20px 0px -5px #000,40px 25px 0px -5px #000,40px -25px 0px -5px #000;
animation-name: shandian;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
position: relative;
}