QQ截图20150717170513.jpg
[HTML]代码
<div class="weather_cloudy_width"> <div class="shatan_width"> <div class="weather_cloudy_shatan"><i class="weather_cloudy_shatan_content"></i></div> </div> <div class="weather_cloudy"> <div class="weather_cloudy_xiong"><i class="weather_cloudy_xiong_content"></i></div> <div class="weather_cloudy_shu"><i class="weather_cloudy_shu_content"></i></div> <div class="weather_cloudy_xiongyingzi"><i class="weather_cloudy_xiongyingzi_content"></i></div> <div class="weather_cloudy_shuye1"><i class="weather_cloudy_shuye1_content"></i></div> <div class="weather_cloudy_shuye2"><i class="weather_cloudy_shuye2_content"></i></div> <div class="weather_cloudy_yun1"><i class="weather_cloudy_yun1_content"></i></div> <div class="weather_cloudy_yun2"><i class="weather_cloudy_yun2_content"></i></div> <div class="weather_cloudy_yun3"><i class="weather_cloudy_yun3_content"></i></div> <div class="weather_cloudy_yun4"><i class="weather_cloudy_yun4_content"></i></div> <div class="weather_cloudy_taiyang"><i class="weather_cloudy_taiyang_content"></i></div> <div class="weather_cloudy_xiaoniao"><i class="weather_cloudy_xiaoniao_content"></i></div> </div> </div>
[JavaScript]代码
/*控制天气----晴*/
.im_shenghuo_item_color_sunny{ background-color:#60a3c5;}
.weather_sunny_width,.weather_rain_width,.weather_neight_width,.weather_snow_width,.weather_cloudy_width,.weather_fog_width{ position:absolute; top:0px;right:0px;width:100%; height:480px; background-color:#60a3c5; border-bottom:#fff solid 1px; margin-bottom:40px; overflow:hidden; z-index:5;}
.weather_sunny,.weather_snow,.weather_rain,.weather_neight,.weather_cloudy,.weather_fog{position:relative; width:980px; height:480px; margin:0px auto; overflow:hidden; z-index:5;}
.shatan_width{ position:absolute; width:100%; height:130px; overflow:hidden; margin:0px auto; right:0px;top:350px; z-index:5;}
.weather_sunny_shatan,.weather_snow_shatan,.weather_rain_shatan,.weather_neight_shatan,.weather_cloudy_shatan,.weather_fog_shatan{ position:relative;width:920px; height:130px; margin:0px auto;}
.weather_sunny_shatan_content,.weather_rain_shatan_content,.weather_neight_shatan_content,.weather_snow_shatan_content,.weather_cloudy_shatan_content,.weather_fog_shatan_content{ position:absolute; bottom:0px; right:-120px; display:block; width:920px; height:130px; background:url(../images/weather_sunny/shatan.png) 0 0 no-repeat;.animation: active_shatan 1s;-moz-animation: active_shatan 1s;-webkit-animation: active_shatan 1s;-o-animation: active_shatan 1s; z-index:5;}
.weather_sunny_taiyang{position:absolute;width:97px; height:97px; bottom:240px; right:50px; z-index:5;
.animation: active_taiyang 1s 3.2s ease both;-moz-animation: active_taiyang 1s 3.2s ease both; -webkit-animation: active_taiyang 1s 3.2s ease both;-o-animation: active_taiyang 1s 3.2s ease both;}
.weather_sunny_taiyang_content{display:inline-block; width:97px; height:97px; background:url(../images/weather_sunny/taiyang.png) 0 0 no-repeat;/*旋转的太阳在这里调用*/animation:taiyangxuanzhuan 8s infinite Linear;-o-animation:taiyangxuanzhuan 8s infinite Linear;-webkit-animation:taiyangxuanzhuan 8s infinite Linear;-moz-animation:taiyangxuanzhuan 8s infinite Linear;}
.weather_sunny_dayun{position:absolute;width:72px; height:41px; bottom:180px; right:80px; z-index:5;.animation: active_dayun 1s 2.5s ease both;-moz-animation: active_dayun 1s 2.5s ease both; -webkit-animation: active_dayun 1s 2.5s ease both; -o-animation: active_dayun 1s 2.5s ease both;}
.weather_sunny_dayun_content{ position:absolute; bottom:0px; right:0px;display:block; width:72px; height:41px; background:url(../images/weather_sunny/dayun.png) 0 0 no-repeat;/*飘动大云彩在这里调用*/.animation:youdong_sunnydayun 15s linear 0s infinite;-moz-animation:youdong_sunnydayun 15s linear 0s infinite;-webkit-animation:youdong_sunnydayun 15s linear 0s infinite;-o-animation:youdong_sunnydayun 15s linear 0s infinite;}
.weather_sunny_xiaoyun{position:absolute;width:49px; height:32px; bottom:160px; right:160px; z-index:5;.animation: active_xiaoyun 1s 2.5s ease both;-moz-animation: active_xiaoyun 1s 2.5s ease both; -webkit-animation: active_xiaoyun 1s 2.5s ease both; -o-animation: active_xiaoyun 1s 2.5s ease both;}
.weather_sunny_xiaoyun_content{position:absolute; bottom:0px; right:0px;display:block; width:49px; height:32px; background:url(../images/weather_sunny/xiaoyun.png) 0 0 no-repeat;/*飘动小云彩在这里调用*/.animation:youdong_sunnyxiaoyun 10s linear 0s infinite;-moz-animation:youdong_sunnyxiaoyun 10s linear 0s infinite;-webkit-animation:youdong_sunnyxiaoyun 10s linear 0s infinite;-o-animation:youdong_sunnyxiaoyun 10s linear 0s infinite;}
.weather_sunny_qiqiu{position:absolute;width:51px; height:70px; bottom:150px; right:60px; z-index:5;.animation: active_qiqiu 1s 3s ease both;-moz-animation: active_qiqiu 1s 3s ease both; -webkit-animation: active_qiqiu 1s 3s ease both; -o-animation: active_qiqiu 1s 3s ease both;}
.weather_sunny_qiqiu_content{ position:absolute; bottom:0px; right:0px;display:block; width:51px; height:70px; background:url(../images/weather_sunny/qiqiu.png) 0 0 no-repeat;/*引用气球移动动画*/.animation:shangxia_qiqiu 5s linear 0s infinite alternate;-moz-animation:shangxia_qiqiu 5s linear 0s infinite;-webkit-animation:shangxia_qiqiu 5s linear 0s infinite alternate;}
.weather_sunny_dashu{position:absolute;width:61px; height:76px; bottom:106px; right:311px; z-index:8;.animation: active_dashu 0.6s 2s ease both;-moz-animation: active_dashu 0.6s 2s ease both; -webkit-animation: active_dashu 0.6s 2s ease both; -o-animation: active_dashu 0.6s 2s ease both;}
.weather_sunny_dashu_content{display:inline-block; width:61px; height:76px; background:url(../images/weather_sunny/dashu.png) 0 0 no-repeat;}
.weather_sunny_xiaoshu{position:absolute;width:46px; height:51px; bottom:110px; right:276px; z-index:8;.animation: active_xiaoshu 1s 2s ease both;-moz-animation: active_xiaoshu 1s 2s ease both; -webkit-animation: active_xiaoshu 1s 2s ease both; -o-animation: active_xiaoshu 1s 2s ease both;}
.weather_sunny_xiaoshu_content{display:inline-block; width:46px; height:51px; background:url(../images/weather_sunny/xiaoshu.png) 0 0 no-repeat;}
.weather_sunny_xiong{position:absolute;width:96px; height:144px; bottom:70px; right:380px; z-index:8;.animation: active_sunnyxiong 1s 0.5s ease both;-moz-animation: active_sunnyxiong 1s 0.5s ease both; -webkit-animation: active_sunnyxiong 1s 0.5s ease both; -o-animation: active_sunnyxiong 1s 0.5s ease both;}
.weather_sunny_xiong_content{display:inline-block; width:96px; height:144px; background:url(../images/weather_sunny/xiong.png) 0 0 no-repeat;}
.weather_sunny_yingzi{position:absolute;width:96px; height:30px; bottom:70px; right:375px; z-index:7;.animation: active_sunnyyingzi 1s 1s ease both;-moz-animation: active_sunnyyingzi 1s 1s ease both; -webkit-animation: active_sunnyyingzi 1s 1s ease both; -o-animation: active_sunnyyingzi 1s 1s ease both;}
.weather_sunny_yingzi_content{display:inline-block; width:96px; height:30px; background:url(../images/weather_sunny/yingzi.png) 0 0 no-repeat;}
.weather_sunny_yugan{position:absolute;width:241px; height:46px; bottom:110px; right:430px; z-index:9;.animation: active_yugan 1s 1.2s ease both;-moz-animation: active_yugan 1s 1.2s ease both; -webkit-animation: active_yugan 1s 1.2s ease both; -o-animation: active_yugan 1s 1.2s ease both;}
.weather_sunny_yugan_content{display:inline-block; width:241px; height:46px; background:url(../images/weather_sunny/yugan.png) 0 0 no-repeat;}
.weather_sunny_yugou{position:absolute;width:97px; height:97px; bottom:15px; right:594px; z-index:4;.animation: active_yugou 2s 1.5s ease both;-moz-animation: active_yugou 2s 1.5s ease both; -webkit-animation: active_yugou 2s 1.5s ease both; -o-animation: active_yugou 2s 1.5s ease both;}
.weather_sunny_yugou_content{display:inline-block; width:97px; height:97px; background:url(../images/weather_sunny/yugou.png) 0 0 no-repeat;}
.weather_sunny_shuitong{position:absolute;width:28px; height:28px; bottom:70px; right:375px; z-index:8;.animation: active_shuitong 0.5s 1.5s ease both;-moz-animation: active_shuitong 0.5s 1.5s ease both; -webkit-animation: active_shuitong 0.5s 1.5s ease both; -o-animation: active_shuitong 0.5s 1.5s ease both;}
.weather_sunny_shuitong_content{display:inline-block; width:28px; height:28px; background:url(../images/weather_sunny/shuitong.png) 0 0 no-repeat;}
.weather_sunny_dayu{position:absolute;width:34px; height:14px; bottom:45px; right:700px; z-index:4;
.animation: active_liuxing 2s 3s ease both;-moz-animation: active_liuxing 2s 3s ease both; -webkit-animation: active_liuxing 2s 3s ease both; -o-animation: active_liuxing 2s 3s ease both;
}
.weather_sunny_dayu_content{ position:absolute; bottom:0px; right:0px;display:block; width:34px; height:14px; background:url(../images/weather_sunny/dayu.png) 0 0 no-repeat;/*引用游动的大鱼动画*/.animation:youdong_dayu 5s 0s linear infinite;-moz-animation:youdong_dayu 5s 0s linear infinite;-webkit-animation:youdong_dayu 5s 0s linear infinite;-o-animation:youdong_dayu 5s 0s linear infinite;}
.weather_sunny_xiaoyu{position:absolute;width:28px; height:13px; bottom:25px; right:800px; z-index:3;.animation: active_liuxing 2s 4s ease both;-moz-animation: active_liuxing 2s 4s ease both; -webkit-animation: active_liuxing 2s 4s ease both; -o-animation: active_liuxing 2s 4s ease both;}
.weather_sunny_xiaoyu_content{ position:absolute; bottom:0px; right:0px;display:block; width:28px; height:13px; background:url(../images/weather_sunny/xiaoyu.png) 0 0 no-repeat;/*引用游动的小鱼动画*/.animation:youdong_xiaoyu 4s 0s linear infinite;-moz-animation:youdong_xiaoyu 4s 0s linear infinite;-webkit-animation:youdong_xiaoyu 4s 0s linear infinite;-o-animation:youdong_xiaoyu 4s 0s linear infinite;}
@keyframes active_taiyang{0% {bottom:350px;filter:alpha(opacity=100);}100% {bottom:240px;filter:alpha(opacity=0);}}
@-moz-keyframes active_taiyang{0% {bottom:350px;-moz-opacity:0;opacity:0;}100% {bottom:240px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_taiyang {0% {bottom:350px;opacity:0;}100% {bottom:240px;opacity:1;}}
@keyframes active_dayun{0% {bottom:180px; right:0px;filter:alpha(opacity=100);}100% {bottom:180px; right:80px;filter:alpha(opacity=0);}}
@-moz-keyframes active_dayun {0% {bottom:180px; right:0px;-moz-opacity:0;opacity:0;}100% {bottom:180px; right:80px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_dayun {0% {bottom:180px; right:0px;opacity:0;}100% {bottom:180px; right:80px;opacity:1;}}
@keyframes active_xiaoyun{0% {right:300px;filter:alpha(opacity=100);}100% {right:160px;filter:alpha(opacity=0);}}
@-moz-keyframes active_xiaoyun {0% {right:300px;-moz-opacity:0;opacity:0;}100% {right:160px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_xiaoyun {0% {right:300px;opacity:0;}100% {right:160px;opacity:1;}}
@keyframes active_qiqiu{0% {bottom:50px;filter:alpha(opacity=100);}100% {bottom:150px;filter:alpha(opacity=0);}}
@-moz-keyframes active_qiqiu {0% {bottom:50px;-moz-opacity:0;opacity:0;}100% {bottom:150px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_qiqiu {0% {bottom:50px;opacity:0;}100% {bottom:150px;opacity:1;}}
@keyframes active_dashu{0% {bottom:220px;filter:alpha(opacity=100);}100% {bottom:106px;filter:alpha(opacity=0);}}
@-moz-keyframes active_dashu {0% {bottom:220px;-moz-opacity:0;opacity:0;}100% {bottom:106px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_dashu {0% {bottom:220px;opacity:0;}100% {bottom:106px;opacity:1;}}
@keyframes active_xiaoshu{0% {bottom:200px;filter:alpha(opacity=100);}100% {bottom:110px;filter:alpha(opacity=0);}}
@-moz-keyframes active_xiaoshu {0% {bottom:200px;-moz-opacity:0;opacity:0;}100% {bottom:110px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_xiaoshu {0% {bottom:200px;opacity:0;}100% {bottom:110px;opacity:1;}}
@keyframes active_sunnyxiong{0% {bottom:150px;filter:alpha(opacity=100);}100% {bottom:70px;filter:alpha(opacity=0);}}
@-moz-keyframes active_sunnyxiong {0% {bottom:150px;-moz-opacity:0;opacity:0;}100% {bottom:70px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_sunnyxiong {0% {bottom:150px;opacity:0;}100% {bottom:70px;opacity:1;}}
@keyframes active_sunnyyingzi{0% {bottom:40px;opacity:0;}100% {bottom:70px;opacity:1;}}
@-moz-keyframes active_sunnyyingzi {0% {bottom:40px;-moz-opacity:0;opacity:0;}100% {bottom:70px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_sunnyyingzi {0% {bottom:40px;opacity:0;}100% {bottom:70px;opacity:1;}}
@keyframes active_yugan{0% {bottom:180px;filter:alpha(opacity=100);}100% {bottom:110px;filter:alpha(opacity=0);}}
@-moz-keyframes active_yugan {0% {bottom:180px;-moz-opacity:0;opacity:0;}100% {bottom:110px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_yugan {0% {bottom:180px;opacity:0;}100% {bottom:110px;opacity:1;}}
@keyframes active_yugou{0% {filter:alpha(opacity=100);}100% {filter:alpha(opacity=0);}}
@-moz-keyframes active_yugou{0% {-moz-opacity:0;opacity:0;}100% {-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_yugou {0% {opacity:0;}100% {opacity:1;}}
@keyframes active_shuitong{0% {bottom:150px;filter:alpha(opacity=100);}100% {bottom:70px;filter:alpha(opacity=0);}}
@-moz-keyframes active_shuitong {0% {bottom:150px;-moz-opacity:0;opacity:0;}100% {bottom:70px;-moz-opacity:1;opacity:1;}}
@-webkit-keyframes active_shuitong{0% {bottom:150px;opacity:0;}100% {bottom:70px;opacity:1;}}
/*旋转的太阳*/
@keyframes taiyangxuanzhuan{0%{} 100%{-webkit-transform:perspective(0px) translate(0px,0px) translateZ(0px) scale(1,1) rotate(360deg)}}
@-webkit-keyframes taiyangxuanzhuan{0%{} 100%{-webkit-transform:perspective(0px) translate(0px,0px) translateZ(0px) scale(1,1) rotate(360deg)}}
@-moz-keyframes taiyangxuanzhuan{0%{} 100%{-moz-transform:translate(0px,0px) scale(1,1) skew(0deg) rotate(360deg)}}
/*上下动的气球*/
@keyframes shangxia_qiqiu {0%{ margin-bottom:0px; }20%{ margin-bottom:10px;}80%{ margin-bottom:-10px;}100%{ margin-bottom:0px; }}
@-webkit-keyframes shangxia_qiqiu {0%{ margin-bottom:0px; }20%{ margin-bottom:10px;}80%{ margin-bottom:-10px;}100%{ margin-bottom:0px; }}
@-moz-keyframes shangxia_qiqiu {0%{ margin-bottom:0px; }20%{ margin-bottom:10px;}80%{ margin-bottom:-10px;}100%{ margin-bottom:0px; }}
/*游动的大鱼*/
@keyframes youdong_dayu{0% { right:170px; opacity: 0;}20% { right:120;opacity: 1;}90% {right:70px; opacity: 1;}100% { right:0px; opacity: 0;}}
@-moz-keyframes youdong_dayu{0% { right:170px; opacity: 0;}20% { right:120;opacity: 1;}90% {right:70px; opacity: 1;}100% { right:0px; opacity: 0;}}
@-webkit-keyframes youdong_dayu{0% { right:170px; opacity: 0;}20% { right:120;opacity: 1;}90% {right:70px; opacity: 1;}100% { right:0px; opacity: 0;}}
/*游动的小鱼*/
@keyframes youdong_xiaoyu{0% { right:0px; opacity: 0;}20% { right:20px;opacity: 1;}90% {right:100px; opacity: 1;}100% { right:140px; opacity: 0;}}
@-webkit-keyframes youdong_xiaoyu{0% { right:0px; opacity: 0;}20% { right:20px;opacity: 1;}90% {right:100px; opacity: 1;}100% { right:140px; opacity: 0;}}
@-moz-keyframes youdong_xiaoyu{0% { right:0px; opacity: 0;}20% { right:20px;opacity: 1;}90% {right:100px; opacity: 1;}100% { right:140px; opacity: 0;}}
/*飘动大云*/
@keyframes youdong_sunnydayun{0%{right:0px;}50%{ right:-20px;}100% {right:0px; }}
@-moz-keyframes youdong_sunnydayun {0%{right:0px;}50%{ right:-20px;}100% {right:0px; }}
@-webkit-keyframes youdong_sunnydayun {0%{right:0px;}50%{ right:-20px;}100% {right:0px; }}
/*飘动小云*/
@keyframes youdong_sunnyxiaoyun{0%{right:-20px;}50%{ right:20px;}100% {right:0px; }}
@-moz-keyframes youdong_sunnyxiaoyun {0%{right:-20px;}50%{ right:20px;}100% {right:0px; }}
@-webkit-keyframes youdong_sunnyxiaoyun {0%{right:-20px;}50%{ right:20px;}100% {right:0px; }}
/*控制天气----雨天*/
.im_shenghuo_item_color_rain{ background-color:#749899;}
.weather_rain_width{background-color:#749899;}
.weather_rain_shatan_content{background:url(../images/weather_rain/shatan.png) 0 0 no-repeat;}
.weather_rain_yu{position:absolute;width:600px; height:500px; bottom:0px; right:0px; z-index:6;.animation: active_xiayu 2s 0.5s ease both;-moz-animation: active_xiayu 2s 0.5s ease both; -webkit-animation: active_xiayu 2s 0.5s ease both; -o-animation: active_xiayu 2s 0.5s ease both;}
.weather_rain_yu_content{display:inline-block; width:600px; height:520px; background:url(../images/weather_rain/yu_sprite.png) 0 0 no-repeat;.animation:xiayu infinite step-start 200ms;-moz-animation:xiayu infinite step-start 200ms;-webkit-animation:xiayu infinite step-start 200ms;-o-animation:xiayu infinite step-start 200ms;}
.weather_rain_xiong{position:absolute;width:88px; height:146px; top:270px; right:330px; z-index:8;.animation: active_rainxiong 0.5s 1s ease both;-moz-animation: active_rainxiong 0.5s 1s ease both; -webkit-animation: active_rainxiong 0.5s 1s ease both; -o-animation: active_rainxiong 0.5s 1s ease both;}
.weather_rain_xiong_content{display:inline-block; width:88px; height:146px; background:url(../images/weather_rain/xiong.png) 0 0 no-repeat;}
.weather_rain_yusan{position:absolute;width:100px; height:100px; top:230px; right:357px; z-index:8;.animation: active_yusan 1s 1.2s ease both;-moz-animation: active_yusan 1s 1.2s ease both;-webkit-animation: active_yusan 1s 1.2s ease both; -o-animation: active_yusan 1s 1.2s ease both;}
.weather_rain_yusan_content{display:inline-block; width:100px; height:100px; background:url(../images/weather_rain/yusan_sprite.png) 0 0 no-repeat;/*雨伞*/.animation:yusan infinite step-start 400ms;-moz-animation:yusan infinite step-start 400ms;-webkit-animation:yusan infinite step-start 400ms;-o-animation:yusan infinite step-start 400ms;}
.weather_rain_yun{position:absolute;width:120px; height:167px; top:150px; right:120px; z-index:8;.animation: active_rainyun 1s 1.5s ease both;-moz-animation: active_rainyun 1s 1.5s ease both; -webkit-animation: active_rainyun 1s 1.5s ease both; -o-animation: active_rainyun 1s 1.5s ease both;}
.weather_rain_yun_content{display:inline-block; width:120px; height:167px; background:url(../images/weather_rain/yun_sprite.png) 0 0 no-repeat;/*下雨的云*/
.animation:rainyun infinite step-start 800ms;-moz-animation:rainyun infinite step-start 800ms;-webkit-animation:rainyun infinite step-start 800ms;-o-animation:rainyun infinite step-start 800ms;}
.weather_rain_wuyun{position:absolute;width:130px; height:80px; top:140px; right:10px; z-index:8;.animation: active_rainwuyun 0.6s 1.5s ease both;-moz-animation: active_rainwuyun 0.6s 1.5s ease both; -webkit-animation: active_rainwuyun 0.6s 1.5s ease both; -o-animation: active_rainwuyun 0.6s 1.5s ease both;}
.weather_rain_wuyun_content{display:inline-block; width:130px; height:80px; background:url(../images/weather_rain/wuyun_sprite.png) 0 0 no-repeat;/*下雨的乌云*/
.animation:rainwuyun infinite step-start 800ms;-moz-animation:rainwuyun infinite step-start 800ms;-webkit-animation:rainwuyun infinite step-start 800ms;-o-animation:rainwuyun infinite step-start 800ms;}
.weather_rain_shuikeng1{position:absolute;width:102px; height:24px; top:395px; right:318px; z-index:5;.animation: active_shuikeng 2s 3s ease both;-moz-animation: active_shuikeng 2s 3s ease both; -webkit-animation: active_shuikeng 2s 3s ease both; -o-animation: active_shuikeng 2s 3s ease both;}
.weather_rain_shuikeng1_content{display:inline-block; width:102px; height:24px; background:url(../images/weather_rain/shuikeng1.png) 0 0 no-repeat;}
.weather_rain_shuikeng2{position:absolute;width:25px; height:24px; top:390px; right:485px; z-index:8;.animation: active_shuikeng 1s 3.5s ease both;-moz-animation: active_shuikeng 1s 3.5s ease both; -webkit-animation: active_shuikeng 1s 3.5s ease both; -o-animation: active_shuikeng 1s 3.5s ease both;}
.weather_rain_shuikeng2_content{display:inline-block; width:25px; height:24px; background:url(../images/weather_rain/shuikeng2.png) 0 0 no-repeat;}
.weather_rain_shuikeng3{position:absolute;width:76px; height:24px; top:456px; right:520px; z-index:8;.animation: active_shuikeng 2s 4s ease both;-moz-animation: active_shuikeng 2s 4s ease both; -webkit-animation: active_shuikeng 2s 4s ease both; -o-animation: active_shuikeng 2s 4s ease both;}
.weather_rain_shuikeng3_content{display:inline-block; width:76px; height:24px; background:url(../images/weather_rain/shuikeng3.png) 0 0 no-repeat;}
@keyframes active_xiayu{0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_xiayu {0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_xiayu {0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_rainxiong{0% { top:220px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:270px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_rainxiong {0% { top:220px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:270px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_rainxiong {0% { top:220px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:270px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_yusan{0% { top:190px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:230px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_yusan {0%{ top:190px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:230px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_yusan {0%{ top:190px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:230px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_rainwuyun{0%{right:-20px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { right:10px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_rainwuyun {0% {right:-20px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { right:10px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_rainwuyun {0% {right:-20px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { right:10px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_rainyun{0%{ top:130px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:150px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_rainyun {0% { top:130px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:150px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_rainyun {0% { top:130px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { top:150px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_shuikeng{0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_shuikeng {0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_shuikeng {0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes xiayu{ 0% { background-position:0px 0px ;} 33.3% { background-position:-600px 0px ;} 100% { background-position:-1200px 0px ;}}
@-webkit-keyframes xiayu{ 0% { background-position:0px 0px ;} 33.3% { background-position:-600px 0px ;} 100% { background-position:-1200px 0px ;}}
@-moz-keyframes xiayu{ 0% { background-position:0px 0px ;} 33.3% { background-position:-600px 0px ;} 100% { background-position:-1200px 0px ;}}
@keyframes yusan{ 0% { background-position:0px 0px ;} 33.3% { background-position:-100px 0px ;} 100% { background-position:-200px 0px ;}}
@-webkit-keyframes yusan{ 0% { background-position:0px 0px ;} 33.3% { background-position:-100px 0px ;} 100% { background-position:-200px 0px ;}}
@-moz-keyframes yusan{ 0% { background-position:0px 0px ;} 33.3% { background-position:-100px 0px ;} 100% { background-position:-200px 0px ;}}
@keyframes rainyun{ 0% { background-position:0px 0px ;} 20% { background-position:-120px 0px ;} 40% { background-position:-240px 0px ;} 60% { background-position:-360px 0px ;} 80% { background-position:-480px 0px ;} 100% { background-position:-600px 0px ;}}
@-moz-keyframes rainyun{ 0% { background-position:0px 0px ;} 20% { background-position:-120px 0px ;} 40% { background-position:-240px 0px ;} 60% { background-position:-360px 0px ;} 80% { background-position:-480px 0px ;} 100% { background-position:-600px 0px ;}}
@-webkit-keyframes rainyun{ 0% { background-position:0px 0px ;} 20% { background-position:-120px 0px ;} 40% { background-position:-240px 0px ;} 60% { background-position:-360px 0px ;} 80% { background-position:-480px 0px ;} 100% { background-position:-600px 0px ;}}
@keyframes rainwuyun{ 0% { background-position:0px 0px ;} 25% { background-position:-130px 0px ;}50% { background-position:-260px 0px ;}75% { background-position:-390px 0px ;} 100% { background-position:-520px 0px ;}}
@-moz-keyframes rainwuyun{ 0% { background-position:0px 0px ;} 25% { background-position:-130px 0px ;}50% { background-position:-260px 0px ;}75% { background-position:-390px 0px ;} 100% { background-position:-520px 0px ;}}
@-webkit-keyframes rainwuyun{ 0% { background-position:0px 0px ;} 25% { background-position:-130px 0px ;}50% { background-position:-260px 0px ;}75% { background-position:-390px 0px ;} 100% { background-position:-520px 0px ;}}
/*控制天气----夜晚*/
.weather_neight_width{background-color:#4f4747;}
.im_shenghuo_item_color_neight{ background-color:#4f4747;}
.weather_neight_shatan_content{ background:url(../images/weather_neight/shatan.png) 0 0 no-repeat;}
.weather_neight_liuxing{ position:absolute;width:304px; height:117px; top:160px; right:235px; z-index:10;.animation: active_liuxing 1s 3s ease both;-moz-animation: active_liuxing 1s 3s ease both; -webkit-animation: active_liuxing 1s 3s ease both; -o-animation: active_liuxing 1s 3s ease both;}
.weather_neight_liuxing_content{ display:inline-block; width:304px; height:117px; background:url(../images/weather_neight/liuxing.gif) 0 0 no-repeat;}
.weather_neight_yueliang{ position:absolute;width:213px; height:178px; top:135px; right:0px; z-index:10;.animation: active_liuxing 1s 2.5s ease both;-moz-animation: active_liuxing 1s 2.5s ease both; -webkit-animation: active_liuxing 1s 2.5s ease both; -o-animation: active_liuxing 1s 2.5s ease both;}
.weather_neight_yueliang_content{ display:inline-block; width:213px; height:178px; background:url(../images/weather_neight/yueliang.gif) 0 0 no-repeat;}
.weather_neight_zhangpeng{ position:absolute;width:230px; height:142px; bottom:50px; right:320px; z-index:15;.animation: active_zhangpeng 1s 1.5s ease both;-moz-animation: active_zhangpeng 1s 1.5s ease both; -webkit-animation: active_zhangpeng 1s 1.5s ease both; -o-animation: active_zhangpeng 1s 1.5s ease both;}
.weather_neight_zhangpeng_content{ display:inline-block; width:230px; height:142px; background:url(../images/weather_neight/zhangpeng.png) 0 0 no-repeat;}
.weather_neight_paiwu{ position:absolute;width:150px; height:150px; bottom:48px; right:80px; z-index:12;.animation: active_liuxing 1s 2s ease both;-moz-animation: active_liuxing 1s 2s ease both; -webkit-animation: active_liuxing 1s 2s ease both; -o-animation: active_liuxing 1s 2s ease both;}
.weather_neight_paiwu_content{ position:absolute; bottom:0px; right:0px;display:block; width:150px; height:150px; background:url(../images/weather_neight/paiwu.png) 0 0 no-repeat;.animation:dengguang_paiwu infinite step-start 1700ms;-moz-animation:dengguang_paiwu infinite step-start 1700ms;-webkit-animation:dengguang_paiwu infinite step-start 1700ms;-o-animation:dengguang_paiwu infinite step-start 1700ms;}
.weather_neight_shu{ position:absolute;width:59px; height:73px; bottom:95px; right:500px; z-index:15;.animation: active_shu 0.5s 1s ease both;-moz-animation: active_shu 0.5s 1s ease both; -webkit-animation: active_shu 0.5s 1s ease both; -o-animation: active_shu 0.5s 1s ease both;}
.weather_neight_shu_content{ display:inline-block; width:59px; height:73px; background:url(../images/weather_neight/shu.png) 0 0 no-repeat;}
.weather_neight_caoduo{ position:absolute;width:83px; height:48px; bottom:90px; right:270px; z-index:13;.animation: active_caoduo 0.9s 1s ease both;-moz-animation: active_caoduo 0.9s 1s ease both; -webkit-animation: active_caoduo 0.9s 1s ease both; -o-animation: active_caoduo 0.9s 1s ease both;}
.weather_neight_caoduo_content{ display:inline-block; width:83px; height:48px; background:url(../images/weather_neight/shu.png) 0 0 no-repeat;}
.weather_neight_z{ position:absolute;width:91px; height:58px; bottom:182px; right:285px; z-index:15;.animation: active_liuxing 1s 4s ease both;-moz-animation: active_liuxing 1s 4s ease both; -webkit-animation: active_liuxing 1s 4s ease both; -o-animation: active_liuxing 1s 4s ease both;}
.weather_neight_z_content{ display:inline-block; width:91px; height:58px; background:url(../images/weather_neight/z.gif) 0 0 no-repeat;}
@keyframes dengguang_paiwu{ 0% { background-position:0px 0px ;} 25% { background-position:-150px 0px ;}50% { background-position:-300px 0px ;}75% { background-position:-450px 0px ;}100% { background-position:-600px 0px ;}}
@-webkit-keyframes dengguang_paiwu{ 0% { background-position:0px 0px ;} 25% { background-position:-150px 0px ;}50% { background-position:-300px 0px ;}75% { background-position:-450px 0px ;}100% { background-position:-600px 0px ;}}
@-moz-keyframes dengguang_paiwu{ 0% { background-position:0px 0px ;} 25% { background-position:-150px 0px ;}50% { background-position:-300px 0px ;}75% { background-position:-450px 0px ;}100% { background-position:-600px 0px ;}}
@keyframes active_shatan{0% {bottom:-140px;}100% {bottom:0px; }}
@-moz-keyframes active_shatan {0% {bottom:-140px;}100% {bottom:0px;}}
@-webkit-keyframes active_shatan {0% {bottom:-140px;}100% {bottom:0px;}}
@keyframes active_zhangpeng{0% {bottom:-200px; right:320px;}100% {bottom:50px; right:320px;}}
@-moz-keyframes active_zhangpeng{0% {bottom:-200px; right:320px;}100% {bottom:50px; right:320px;}}
@-webkit-keyframes active_zhangpeng{0% {bottom:-200px; right:320px;}100% {bottom:50px; right:320px;}}
@keyframes active_shu{0% {bottom:95px; right:600px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {bottom:95px; right:500px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_shu{0% {bottom:95px; right:600px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {bottom:95px; right:500px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_shu{0% {bottom:95px; right:600px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {bottom:95px; right:500px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_caoduo{0% {bottom:90px; right:170px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {bottom:90px; right:270px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_caoduo{0% {bottom:90px; right:170px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {bottom:90px; right:270px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_caoduo{0% {bottom:90px; right:170px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {bottom:90px; right:270px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_liuxing{0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_liuxing{0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_liuxing{0% {opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% {opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
/*控制天气----雪天*/
.weather_snow_width{ background-color:#7ebcaf;}
.im_shenghuo_item_color_snow{ background-color:#7ebcaf;}
.weather_snow_shatan_content{background:url(../images/weather_snow/shatan.png) 0 0 no-repeat;}
.weather_snow_xiong{ position:absolute; bottom:60px; right:370px; z-index:10;.animation: active_snowxiong 1s 1s ease both;-moz-animation: active_snowxiong 1s 1s ease both; -webkit-animation: active_snowxiong 1s 1s ease both; -o-animation: active_snowxiong 1s 1s ease both;}
.weather_snow_xiong_content{ display:inline-block; width:153px; height:163px; background:url(../images/weather_snow/snowxiong.png) 0 0 no-repeat;}
.weather_snow_xiongyingzi{ position:absolute; bottom:60px; right:444px; z-index:10;.animation: active_liuxing 1s 1.5s ease both;-moz-animation: active_liuxing 1s 1.5s ease both; -webkit-animation: active_liuxing 1s 1.5s ease both;-o-animation: active_liuxing 1s 1.5s ease both;}
.weather_snow_xiongyingzi_content{ display:inline-block; width:79px; height:43px; background:url(../images/weather_snow/snowxiong_yingzi.png) 0 0 no-repeat;}
.weather_snow_gouhuo{ position:absolute; bottom:70px; right:320px; z-index:10;.animation: active_gouhuo 1s 1.5s ease both;-moz-animation: active_gouhuo 1s 1.5s ease both; -webkit-animation: active_gouhuo 1s 1.5s ease both; -o-animation: active_gouhuo 1s 1.5s ease both;}
.weather_snow_gouhuo_content{ display:inline-block; width:100px; height:100px; background:url(../images/weather_snow/gouhuo.png) 0 0 no-repeat;.animation:gouhuo infinite step-start 700ms;-moz-animation:gouhuo infinite step-start 700ms;-webkit-animation:gouhuo infinite step-start 700ms;-o-animation:gouhuo infinite step-start 700ms;}
.weather_snow_saoba{ position:absolute; bottom:80px; right:155px; z-index:10;.animation: active_saoba 1s 2.3s ease both;-moz-animation: active_saoba 1s 2.3s ease both; -webkit-animation: active_saoba 1s 2.3s ease both; -o-animation: active_saoba 1s 2.3s ease both;}
.weather_snow_saoba_content{ display:inline-block; width:50px; height:70px; background:url(../images/weather_snow/saoba.png) 0 0 no-repeat;}
.weather_snow_xueren{ position:absolute; bottom:70px; right:160px; z-index:10;.animation: active_xueren 1s 2s ease both;-moz-animation: active_xueren 1s 2s ease both; -webkit-animation: active_xueren 1s 2s ease both; -o-animation: active_xueren 1s 2s ease both;}
.weather_snow_xueren_content{ display:inline-block; width:75px; height:90px; background:url(../images/weather_snow/xueren.png) 0 0 no-repeat;}
.weather_snow_songshu{ position:absolute; bottom:100px; right:265px; z-index:3;.animation: active_songshu 1s 2s ease both;-moz-animation: active_songshu 1s 2s ease both; -webkit-animation: active_songshu 1s 2s ease both; -o-animation: active_songshu 1s 2s ease both;}
.weather_snow_songshu_content{ display:inline-block; width:50px; height:85px; background:url(../images/weather_snow/songshu.png) 0 0 no-repeat;}
.weather_snow_yun1{ position:absolute; bottom:250px; right:80px;width:130px; height:100px; z-index:10;.animation: active_liuxing 1s 1s ease both;-moz-animation: active_liuxing 1s 2s ease both; -webkit-animation: active_liuxing 1s 2s ease both; -o-animation: active_liuxing 1s 2s ease both;}
.weather_snow_yun1_content{ position:absolute;display:block; width:130px; height:100px; background:url(../images/weather_snow/snowyun1.png) 0 0 no-repeat;.animation:youdong_snowyun1 3s linear 0s infinite normal;-moz-animation:youdong_snowyun1 3s linear 0s infinite normal;-webkit-animation:youdong_snowyun1 3s linear 0s infinite normal;-o-animation:youdong_snowyun1 3s linear 0s infinite normal;}
.weather_snow_yun2{ position:absolute; width:100px; height:50px;bottom:270px; right:120px; z-index:3;.animation: active_liuxing 3s 2s ease both;-moz-animation: active_liuxing 3s 2s ease both; -webkit-animation: active_liuxing 3s 2s ease both; -o-animation: active_liuxing 3s 2s ease both;}
.weather_snow_yun2_content{ position:absolute; display:block; width:100px; height:50px; background:url(../images/weather_snow/snowyun2.png) 0 0 no-repeat;
.animation:youdong_snowyun2 10s linear infinite normal;-moz-animation:youdong_snowyun2 10s linear infinite normal;-webkit-animation:youdong_snowyun2 10s linear infinite normal;-o-animation:youdong_snowyun2 10s linear infinite normal;
}
.weather_snow_yun3{ position:absolute; bottom:270px; right:0px; width:120px; height:60px; z-index:3;.animation: active_liuxing 4s 2s ease both;-moz-animation: active_liuxing 4s 2s ease both; -webkit-animation: active_liuxing 4s 2s ease both;-o-animation: active_liuxing 4s 2s ease both;}
.weather_snow_yun3_content{ position:absolute; display:block; width:120px; height:60px; background:url(../images/weather_snow/snowyun3.png) 0 0 no-repeat;.animation:youdong_snowyun3 15s linear infinite normal;-moz-animation:youdong_snowyun3 15s linear infinite normal;-webkit-animation:youdong_snowyun3 15s linear infinite normal;-o-animation:youdong_snowyun3 15s linear infinite normal;}
@keyframes gouhuo{ 0% { background-position:0px 0px ;} 25% { background-position:-100px 0px ;}50% { background-position:-200px 0px ;}75% { background-position:-300px 0px ;}100% { background-position:-400px 0px ;}}
@-webkit-keyframes gouhuo{ 0% { background-position:0px 0px ;} 25% { background-position:-100px 0px ;}50% { background-position:-200px 0px ;}75% { background-position:-300px 0px ;}100% { background-position:-400px 0px ;}}
@-moz-keyframes gouhuo{ 0% { background-position:0px 0px ;} 25% { background-position:-100px 0px ;}50% { background-position:-200px 0px ;}75% { background-position:-300px 0px ;}100% { background-position:-400px 0px ;}}
@keyframes youdong_snowyun1 {0% { bottom:0px; right:40px; }20% {bottom:-5px; right:40px;}55% { bottom:0px; right:40px;}80% {bottom:5px; right:40px;}100% { bottom:0px; right:40px;}}
@-moz-keyframes youdong_snowyun1 {0% { bottom:0px; right:40px; }20% {bottom:-5px; right:40px;}55% { bottom:0px; right:40px;}80% {bottom:5px; right:40px;}100% { bottom:0px; right:40px;}}
@-webkit-keyframes youdong_snowyun1 {0% { bottom:0px; right:40px; }20% {bottom:-5px; right:40px;}55% { bottom:0px; right:40px;}80% {bottom:5px; right:40px;}100% { bottom:0px; right:40px;}}
/
@keyframes youdong_snowyun2 {0% { right:50px; opacity: 0.3;}20% { right:100px;opacity: 0.3;}55% { right:150px;opacity: 0.3;}80% {right:100px; opacity: 0.3;}100% { right:50px; opacity: 0.3;}}
@-moz-keyframes youdong_snowyun2 {0% { right:50px; opacity: 0.3;}20% { right:100px;opacity: 0.3;}55% { right:150px;opacity: 0.3;}80% {right:100px; opacity: 0.3;}100% { right:50px; opacity: 0.3;}}
@-webkit-keyframes youdong_snowyun2 {0% { right:50px; opacity: 0.3;}20% { right:100px;opacity: 0.3;}55% { right:150px;opacity: 0.3;}80% {right:100px; opacity: 0.3;}100% { right:50px; opacity: 0.3;}}
@keyframes youdong_snowyun3 {0% { right:120px; opacity: 0.5;}20% { right:50px;opacity: 0.5;}55% { right:0px;opacity: 0.5;}80% {right:50px; opacity: 0.5;}100% { right:120px; opacity: 0.5;}}
@-moz-keyframes youdong_snowyun3 {0% { right:120px; opacity: 0.5;}20% { right:50px;opacity: 0.5;}55% { right:0px;opacity: 0.5;}80% {right:50px; opacity: 0.5;}100% { right:120px; opacity: 0.5;}}
@-webkit-keyframes youdong_snowyun3 {0% { right:120px; opacity: 0.5;}20% { right:50px;opacity: 0.5;}55% { right:0px;opacity: 0.5;}80% {right:50px; opacity: 0.5;}100% { right:120px; opacity: 0.5;}}
@keyframes active_snowxiong{0% {bottom:120px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:60px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_snowxiong {0% {bottom:120px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:60px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_snowxiong {0% {bottom:120px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:60px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_gouhuo{0% {bottom:30px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:70px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_gouhuo {0% {bottom:30px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:70px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_gouhuo {0% {bottom:30px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:70px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_xueren{0% {right:120px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { right:180px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_xueren {0% {right:120px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { right:180px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_xueren {0% {right:120px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { right:180px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_saoba{0% {bottom:140px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:80px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_saoba {0% {bottom:140px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:80px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_saoba {0% {bottom:140px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:80px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@keyframes active_songshu{0% {bottom:40px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:100px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-moz-keyframes active_songshu {0% {bottom:40px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:100px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
@-webkit-keyframes active_songshu {0% {bottom:40px;opacity:0;-moz-opacity:0;filter:alpha(opacity=100);}100% { bottom:100px;opacity:1;-moz-opacity:1;filter:alpha(opacity=0);}}
.weather_snow_xuehua{ position:absolute; bottom:0px; right:0px; width:650px; height:320px; z-index:10;.animation: active_liuxing 4s 2s ease both;-moz-animation: active_liuxing 4s 2s ease both; -webkit-animation: active_liuxing 4s 2s ease both; -o-animation: active_liuxing 4s 2s ease both;}
.weather_snow_xuehua_content{ position:absolute; display:block; width:15px; height:15px; background:url(../images/weather_snow/xuehua.png) 0 0 no-repeat;}
.xuehua1,.xuehua2,.xuehua3,.xuehua4,.xuehua5,.xuehua6,.xuehua7,.xuehua8,.xuehua9,.xuehua10,.xuehua11,.xuehua12,.xuehua13,.xuehua14,.xuehua15{ right:15px; bottom:200px; background-size:10px 10px;
.animation:active_xuehua1 5s linear infinite normal;-moz-animation:active_xuehua1 5s linear infinite normal;-webkit-animation:active_xuehua1 5s linear infinite normal;-o-animation:active_xuehu1 5s linear infinite normal;
}
i.xuehua2{ right:80px; bottom:150px;animation-name:active_xuehua2;-moz-animation-name:active_xuehua2;-webkit-animation-name:active_xuehua2;.animation-duration: 9s;-moz-animation-duration: 9s;-webkit-animation-duration: 9s;background-size:15px 15px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60); }
i.xuehua3{ right:100px; bottom:300px;animation-name:active_xuehua3;-moz-animation-name:active_xuehua3;-webkit-animation-name:active_xuehua3;}
i.xuehua4{ right:120px; bottom:190px;animation-name:active_xuehua4;-moz-animation-name:active_xuehua4;-webkit-animation-name:active_xuehua4;background-size:6px 6px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60); }
i.xuehua5{ right:180px; bottom:150px;animation-name:active_xuehua5;-moz-animation-name:active_xuehua5;-webkit-animation-name:active_xuehua5;background-size:8px 8px;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30); }
i.xuehua6{ right:200px; bottom:200px;animation-name:active_xuehua6;-moz-animation-name:active_xuehua6;-webkit-animation-name:active_xuehua6;.animation-duration: 1s;-moz-animation-duration: 1s;-webkit-animation-duration: 1s;}
i.xuehua7{ right:210px; bottom:230px;animation-name:active_xuehua7;-moz-animation-name:active_xuehua7;-webkit-animation-name:active_xuehua7;.animation-duration: 2s;-moz-animation-duration: 2s;-webkit-animation-duration: 2s;}
i.xuehua8{ right:265px; bottom:155px;animation-name:active_xuehua8;-moz-animation-name:active_xuehua8;-webkit-animation-name:active_xuehua8;background-size:8px 8px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60); }
i.xuehua9{ right:300px; bottom:180px;animation-name:active_xuehua9;-moz-animation-name:active_xuehua9;-webkit-animation-name:active_xuehua9;}
i.xuehua10{ right:330px; bottom:260px;animation-name:active_xuehua10;-moz-animation-name:active_xuehua10;-webkit-animation-name:active_xuehua10;.animation-duration:4s;-moz-animation-duration:4s;-webkit-animation-duration:4s;}
i.xuehua11{ right:360px; bottom:250px;animation-name:active_xuehua11;-moz-animation-name:active_xuehua11;-webkit-animation-name:active_xuehua11;-webkit-animation-duration: 6s;background-size:7px 7px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60); }
i.xuehua12{ right:380px; bottom:200px;animation-name:active_xuehua12;-moz-animation-name:active_xuehua12;-webkit-animation-name:active_xuehua12;background-size:8px 8px;opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30); .animation-duration: 4s;-moz-animation-duration: 4s;-webkit-animation-duration: 4s;}
i.xuehua13{ right:450px; bottom:90px;animation-name:active_xuehua13;-moz-animation-name:active_xuehua13;-webkit-animation-name:active_xuehua13;background-size:6px 6px;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60); .animation-duration: 10s;-moz-animation-duration: 10s;-webkit-animation-duration: 10s;}
i.xuehua14{ right:480px; bottom:260px;animation-name:active_xuehua14;-moz-animation-name:active_xuehua14;-webkit-animation-name:active_xuehua14;-webkit-animation-duration: 13s;}
i.xuehua15{ right:550px; bottom:150px;animation-name:active_xuehua15;-moz-animation-name:active_xuehua15;-webkit-animation-name:active_xuehua15;-webkit-animation-duration: 8s;background-size:15px 15px;}
@keyframes active_xuehua1{0% {bottom:300px; right:260px;opacity:0.5;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:220px; right:180px;opacity:1;-webkit-transform:translate(-12px,50px) rotate(90deg);}100% {bottom:50px; right:50px;opacity:0.3;-webkit-transform:translate(10px,-10px) rotate(360deg);}}
@-moz-keyframes active_xuehua1{0% {bottom:300px; right:260px;opacity:0.5;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:220px; right:180px;opacity:1;-webkit-transform:translate(-12px,50px) rotate(90deg);}100% {bottom:50px; right:50px;opacity:0.3;-webkit-transform:translate(10px,-10px) rotate(360deg);}}
@-webkit-keyframes active_xuehua1{0% {bottom:300px; right:260px;opacity:0.5;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:220px; right:180px;opacity:1;-webkit-transform:translate(-12px,50px) rotate(90deg);}100% {bottom:50px; right:50px;opacity:0.3;-webkit-transform:translate(10px,-10px) rotate(360deg);}}
@keyframes active_xuehua2{0% {bottom:360px; right:130px;opacity:0.5;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:230px; right:140px;opacity:1;-webkit-transform:translate(-12px,50px) rotate(360deg);}100% {bottom:70px; right:150px;opacity:0.3;-webkit-transform:translate(10px,-10px) rotate(750deg);}}
@-moz-keyframes active_xuehua2{0% {bottom:360px; right:130px;opacity:0.5;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:230px; right:140px;opacity:1;-webkit-transform:translate(-12px,50px) rotate(360deg);}100% {bottom:70px; right:150px;opacity:0.3;-webkit-transform:translate(10px,-10px) rotate(750deg);}}
@-webkit-keyframes active_xuehua2{0% {bottom:360px; right:130px;opacity:0.5;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:230px; right:140px;opacity:1;-webkit-transform:translate(-12px,50px) rotate(360deg);}100% {bottom:70px; right:150px;opacity:0.3;-webkit-transform:translate(10px,-10px) rotate(750deg);}}
/* 代码整理：大头网 www.datouwang.com */
@keyframes active_xuehua3{0% {bottom:300px; right:100px;opacity:0;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:230px; right:130px;opacity:1;-webkit-transform:translate(0px,50px) rotate(180deg);}
100% {bottom:100px; right:100px;opacity:0;-webkit-transform:translate(10px,-10px) rotate(360deg);}}
@-moz-keyframes active_xuehua3{0% {bottom:300px; right:100px;opacity:0;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:230px; right:130px;opacity:1;-webkit-transform:translate(0px,50px) rotate(180deg);}
100% {bottom:100px; right:100px;opacity:0;-webkit-transform:translate(10px,-10px) rotate(360deg);}}
@-webkit-keyframes active_xuehua3{0% {bottom:300px; right:100px;opacity:0;-webkit-transform:translate(-12px,50px) rotate(0deg);}50% {bottom:230px; right:130px;opacity:1;-webkit-transform:translate(0px,50px) rotate(180deg);}
100% {bottom:100px; right:100px;opacity:0;-webkit-transform:translate(10px,-10px) rotate(360deg);}}
@keyframes active_xuehua4{0% {bottom:290px; right:120px;opacity:0;-webkit-transform:translate(12px,50px) rotate(0deg);}50% {bottom:150px; right:130px;opacity:1;-webkit-transform:translate(0px,50px) rotate(180deg);}
100% {bottom:110px; right:120px;opacity:0;-webkit-transform:translate(10px,50px) rotate(360deg);}}
@-moz-keyframes active_xuehua4{0% {bottom:290px; right:120px;opacity:0;-webkit-transform:translate(12px,50px) rotate(0deg);}50% {bottom:150px; right:130px;opacity:1;-webkit-transform:translate(0px,50px) rotate(180deg);}
100% {bottom:110px; right:120px;opacity:0;-webkit-transform:translate(10px,50px) rotate(360deg);}}
@-webkit-keyframes active_xuehua4{0% {bottom:290px; right:120px;opacity:0;-webkit-transform:translate(12px,50px) rotate(0deg);}50% {bottom:150px; right:130px;opacity:1;-webkit-transform:translate(0px,50px) rotate(180deg);}
100% {bottom:110px; right:120px;opacity:0;-webkit-transform:translate(10px,50px) rotate(360deg);}}
@keyframes active_xuehua5{0% {bottom:250px; right:180px;opacity:0.5;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:150px; right:180px;opacity:0.3;-webkit-transform:translate(12px,50px) rotate(180deg);}}
@-moz-keyframes active_xuehua5{0% {bottom:250px; right:180px;opacity:0.5;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:150px; right:180px;opacity:0.3;-webkit-transform:translate(12px,50px) rotate(180deg);}}
@-webkit-keyframes active_xuehua5{0%{bottom:250px;right:180px;opacity:0.5;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:150px;right:180px;opacity:0.3;-webkit-transform:translate(12px,50px) rotate(180deg);}}
@keyframes active_xuehua6{0%{bottom:260px;right:200px;opacity:0.8;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:220px;right:180px;opacity:0;-webkit-transform:translate(12px,50px) rotate(90deg);}}
@-moz-keyframes active_xuehua6{0%{bottom:260px;right:200px;opacity:0.8;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:220px;right:180px;opacity:0;-webkit-transform:translate(12px,50px) rotate(90deg);}}
@-webkit-keyframes active_xuehua6{0%{bottom:260px;right:200px;opacity:0.8;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:220px;right:180px;opacity:0;-webkit-transform:translate(12px,50px) rotate(90deg);}}
@keyframes active_xuehua7{0%{bottom:280px; right:180px;opacity:0.8;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:250px;right:160px;opacity:0;-webkit-transform:translate(12px,50px) rotate(90deg);}}
@-moz-keyframes active_xuehua7{0%{bottom:280px; right:180px;opacity:0.8;-webkit-transform:translate(12px,50px) rotate(0deg);}100% {bottom:250px;right:160px;opacity:0;-webkit-transform:translate(12px,50px) rotate(90deg);}}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/8770.html