html实时天气怎么加,HTML5 Canvas和jQuery实用实时天气预报事例！

.rain {

animation: rain 9s ease-in-out infinite 1s;

-webkit-animation: rain 9s ease-in-out infinite 1s;

background: #CCCCCC;

border-radius: 50%;

box-shadow: #CCCCCC 65px -25px 0 -5px, #CCCCCC 25px -25px, #CCCCCC 5px 0px 0 2px, #CCCCCC 10px 0px 0 2px, #CCCCCC 15px 0px 0 2px, #CCCCCC 20px 0px 0 2px, #CCCCCC 25px 0px 0 2px, #CCCCCC 30px 0px 0 2px, #CCCCCC 35px 0px 0 2px, #CCCCCC 40px 0px 0 2px, #CCCCCC 45px 0px 0 2px, #CCCCCC 50px 0px 0 2px, #CCCCCC 55px 0px 0 2px, #CCCCCC 60px 0px 0 2px, #CCCCCC 65px 0px 0 2px, #CCCCCC 70px 0px 0 2px, #CCCCCC 75px 0px 0 2px;

display: block;

height: 50px;

width: 50px;

position: absolute;

left: 40px;

top: 80px;

}

.rain:after {

animation: rain_shadow 9s ease-in-out infinite 1s;

-webkit-animation: rain_shadow 9s ease-in-out infinite 1s;

background: #000000;

border-radius: 50%;

content: '';

height: 15px;

width: 120px;

opacity: 0.2;

position: absolute;

left: 5px;

bottom: -60px;

transform: scale(.7);

-webkit-transform: scale(.7);

}

.rain:before {

animation: rain_rain .7s infinite linear;

-webkit-animation: rain_rain .7s infinite linear;

content: '';

background: transparent;

margin-left: 0px;

border-radius: 50%;

display: block;

height: 6px;

width: 3px;

opacity: 0.3;

transform: scale(.9);

-webkit-transform: scale(.9);

}