CSS3 心情由晴雨表決定
雖然在國內使用 CSS3 距離仍是有些遠,可是咱們也要學習這些新技術,今天爲你們分享一些很酷的 CSS3 特效案例,用 CSS3 的新特性製做7個很酷的晴雨表動畫。
GITHUB地址：css3-weather-barometercss
廢話少說，先上效果圖
CSS3 主要技術棧
線性漸變：-webkit-linear-gradientcss3
動畫屬性：animationgit
（這篇文章須要一些掌握 CSS3 動效基礎的童鞋學習）github
科普
animation-name 規定須要綁定到選擇器的 keyframe 名稱。。web
animation-duration 規定完成動畫所花費的時間，以秒或毫秒計。ruby
animation-timing-function 規定動畫的速度曲線。函數
animation-delay 規定在動畫開始以前的延遲。佈局
animation-iteration-count 規定動畫應該播放的次數。學習
animation-direction 規定是否應該輪流反向播放動畫。動畫
線性漸變背景
一共7個動畫，就把它們都放在一起，併成一排吧。
HTML
{% highlight ruby %}
<div class="container">
<div class="sunny"></div>
<div class="cloudy"></div>
<div class="rainy"></div>
<div class="snowy"></div>
<div class="rainbow"></div>
<div class="starry"></div>
<div class="stormy"></div>
</div>
{% endhighlight %}
首先，先讓container這個垂直和水平居中，其次，7個晴雨表寬度爲了保持一致，先計算100%/7 =14.285714...;約得於14.3%；而後使用線性漸變從左到右繪畫出相應的顏色。
CSS
{% highlight ruby %}
.container{
width: 1200px;
position: absolute;
height: 210px;
left: 50%;
top: 50%;
margin: -65px -600px;
-webkit-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(0.9);
background: -webkit-linear-gradient(left, #00BBFF, #00BBFF 14.3%, #2EB5E5 14.3%, #2EB5E5 28.6%, #E6E6E6 28.6%, #E6E6E6 42.9%, #F3D166 42.9%, #F3D166 57.2%, #222233 57.2%, #222233 71.5%, #444444 71.5%, #444444 85.8%, #85DB8C 85.8%);
background: linear-gradient(left, #00BBFF, #00BBFF 14.3%, #2EB5E5 14.3%, #2EB5E5 28.6%, #E6E6E6 28.6%, #E6E6E6 42.9%, #F3D166 42.9%, #F3D166 57.2%, #222233 57.2%, #222233 71.5%, #444444 71.5%, #444444 85.8%, #85DB8C 85.8%);}
{% endhighlight %}
效果
晴天
先分解這個動效，一個外發光的圓，旋轉的兩條矩形的光影（絕對定位佈局）；這裏用到 animation 、旋轉屬性 transform: rotate()、僞元素 ：before、:after；我這裏使用 sunny 和 sunny：before 作旋轉的矩形光影，sunny：after 作 外發光的圓；再用 animation 這個屬性 定義一個旋轉的函數；
CSS
{% highlight ruby %}
.sunny {
-webkit-animation: sunny 15s linear infinite;
animation: sunny 15s linear infinite;
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
height: 140px;
width: 20px;
margin-left: -15px;
position: absolute;
left: 90px;
top: 20px;
}
.sunny:before {
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
content: '';
height: 140px;
width: 20px;
opacity: 1;
position: absolute;
bottom: 0px;
left: 0px;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.sunny:after {
background: #FFEE44;
border-radius: 50%;
box-shadow: rgba(255,255,0,0.2) 0 0 0 15px;
content: '';
height: 80px;
width: 80px;
position: absolute;
left: -30px;
top: 30px;
}
@-webkit-keyframes sunny {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes sunny {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
{% endhighlight %}
效果
多雲
這個"多雲" 主要由雲朵和由小到大變化的陰影組成（絕對定位佈局），這裏我用 cloudy 這個 DIV 自己去畫一個圓，再用 box-shadow去畫那個雲的不規則形狀；用 cloudy:after 去畫陰影。這裏有透明度上的漸變。
CSS
{% highlight ruby %}
.cloudy {
-webkit-animation: cloudy 5s ease-in-out infinite;
animation: cloudy 5s ease-in-out infinite;
background: #FFFFFF;
border-radius: 50%;
box-shadow:
#FFFFFF 65px -15px 0 -5px,
#FFFFFF 25px -25px,
#FFFFFF 30px 10px,
#FFFFFF 60px 15px 0 -10px,
#FFFFFF 85px 5px 0 -5px;
height: 50px;
width: 50px;
margin-left: -60px;
position: absolute;
left: 255px;
top: 70px;
}
.cloudy:after {
-webkit-animation: cloudy_shadow 5s ease-in-out infinite;
animation: cloudy_shadow 5s ease-in-out infinite;
background: #000000;
border-radius: 50%;
content: '';
height: 15px;
width: 120px;
opacity: 0.2;
position: absolute;
left: 5px;
bottom: -60px;
-webkit-transform: scale(.7);
-ms-transform: scale(.7);
transform: scale(.7);
}
@-webkit-keyframes cloudy {
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes cloudy {
50% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@-webkit-keyframes cloudy_shadow {
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
}
@keyframes cloudy_shadow {
50% { -webkit-transform: translateY(20px) scale(1); transform: translateY(20px) scale(1); opacity:.05; }
}
{% endhighlight %}
效果
有雨
有雨的效果除了顏色上和多雲不同以外（絕對定位佈局），新增了一個下雨的效果，這裏能夠用 cloudy:before 去畫這個效果。
CSS
{% highlight ruby %}
.rainy{-webkit-animation:rainy 5s ease-in-out infinite 1s;animation:rainy 5s ease-in-out infinite 1s;background:#ccc;border-radius:50%;box-shadow:#ccc 65px -15px 0 -5px,#ccc 25px -25px,#ccc 30px 10px,#ccc 60px 15px 0 -10px,#ccc 85px 5px 0 -5px;display:block;height:50px;width:50px;margin-left:-60px;position:absolute;left:427px;top:70px}.rainy:after{-webkit-animation:rainy_shadow 5s ease-in-out infinite 1s;animation:rainy_shadow 5s ease-in-out infinite 1s;background:#000;border-radius:50%;content:'';height:15px;width:120px;opacity:.2;position:absolute;left:5px;bottom:-60px;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}.rainy:before{-webkit-animation:rainy_rain .7s infinite linear;animation:rainy_rain .7s infinite linear;content:'';background:#ccc;border-radius:50%;display:block;height:6px;width:3px;opacity:.3;-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}@-webkit-keyframes rainy{50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes rainy{50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@-webkit-keyframes rainy_shadow{50%{-webkit-transform:translateY(20px) scale(1);transform:translateY(20px) scale(1);opacity:.05}}@keyframes rainy_shadow{50%{-webkit-transform:translateY(20px) scale(1);transform:translateY(20px) scale(1);opacity:.05}}@-webkit-keyframes rainy_rain{0%{box-shadow:rgba(0,0,0,0) 30px 30px,rgba(0,0,0,0) 40px 40px,#000 50px 75px,#000 55px 50px,#000 70px 100px,#000 80px 95px,#000 110px 45px,#000 90px 35px}25%{box-shadow:#000 30px 45px,#000 40px 60px,#000 50px 90px,#000 55px 65px,rgba(0,0,0,0) 70px 120px,rgba(0,0,0,0) 80px 120px,#000 110px 70px,#000 90px 60px}26%{box-shadow:#000 30px 45px,#000 40px 60px,#000 50px 90px,#000 55px 65px,rgba(0,0,0,0) 70px 40px,rgba(0,0,0,0) 80px 20px,#000 110px 70px,#000 90px 60px}50%{box-shadow:#000 30px 70px,#000 40px 80px,rgba(0,0,0,0) 50px 100px,#000 55px 80px,#000 70px 60px,#000 80px 45px,#000 110px 95px,#000 90px 85px}51%{box-shadow:#000 30px 70px,#000 40px 80px,rgba(0,0,0,0) 50px 45px,#000 55px 80px,#000 70px 60px,#000 80px 45px,#000 110px 95px,#000 90px 85px}75%{box-shadow:#000 30px 95px,#000 40px 100px,#000 50px 60px,rgba(0,0,0,0) 55px 95px,#000 70px 80px,#000 80px 70px,rgba(0,0,0,0) 110px 120px,rgba(0,0,0,0) 90px 110px}76%{box-shadow:#000 30px 95px,#000 40px 100px,#000 50px 60px,rgba(0,0,0,0) 55px 35px,#000 70px 80px,#000 80px 70px,rgba(0,0,0,0) 110px 25px,rgba(0,0,0,0) 90px 15px}100%{box-shadow:rgba(0,0,0,0) 30px 120px,rgba(0,0,0,0) 40px 120px,#000 50px 75px,#000 55px 50px,#000 70px 100px,#000 80px 95px,#000 110px 45px,#000 90px 35px}}@keyframes rainy_rain{0%{box-shadow:rgba(0,0,0,0) 30px 30px,rgba(0,0,0,0) 40px 40px,#000 50px 75px,#000 55px 50px,#000 70px 100px,#000 80px 95px,#000 110px 45px,#000 90px 35px}25%{box-shadow:#000 30px 45px,#000 40px 60px,#000 50px 90px,#000 55px 65px,rgba(0,0,0,0) 70px 120px,rgba(0,0,0,0) 80px 120px,#000 110px 70px,#000 90px 60px}26%{box-shadow:#000 30px 45px,#000 40px 60px,#000 50px 90px,#000 55px 65px,rgba(0,0,0,0) 70px 40px,rgba(0,0,0,0) 80px 20px,#000 110px 70px,#000 90px 60px}50%{box-shadow:#000 30px 70px,#000 40px 80px,rgba(0,0,0,0) 50px 100px,#000 55px 80px,#000 70px 60px,#000 80px 45px,#000 110px 95px,#000 90px 85px}51%{box-shadow:#000 30px 70px,#000 40px 80px,rgba(0,0,0,0) 50px 45px,#000 55px 80px,#000 70px 60px,#000 80px 45px,#000 110px 95px,#000 90px 85px}75%{box-shadow:#000 30px 95px,#000 40px 100px,#000 50px 60px,rgba(0,0,0,0) 55px 95px,#000 70px 80px,#000 80px 70px,rgba(0,0,0,0) 110px 120px,rgba(0,0,0,0) 90px 110px}76%{box-shadow:#000 30px 95px,#000 40px 100px,#000 50px 60px,rgba(0,0,0,0) 55px 35px,#000 70px 80px,#000 80px 70px,rgba(0,0,0,0) 110px 25px,rgba(0,0,0,0) 90px 15px}100%{box-shadow:rgba(0,0,0,0) 30px 120px,rgba(0,0,0,0) 40px 120px,#000 50px 75px,#000 55px 50px,#000 70px 100px,#000 80px 95px,#000 110px 45px,#000 90px 35px}}
.rainbow{-webkit-animation:rainbow 5s ease-in-out infinite;animation:rainbow 5s ease-in-out infinite;border-radius:170px 0 0 0;box-shadow:#fb323c -2px -2px 0 1px,#f99716 -4px -4px 0 3px,#fee124 -6px -6px 0 5px,#afdf2e -8px -8px 0 7px,#6ad7f8 -10px -10px 0 9px,#60b1f5 -12px -12px 0 11px,#a3459b -14px -14px 0 13px;height:70px;width:70px;margin-left:-40px;position:absolute;left:610px;top:71px;-webkit-transform:rotate(40deg);-ms-transform:rotate(40deg);transform:rotate(40deg)}.rainbow:after{-webkit-animation:rainbow_shadow 5s ease-in-out infinite;animation:rainbow_shadow 5s ease-in-out infinite;background:#000;border-radius:50%;content:'';opacity:.2;height:15px;width:120px;position:absolute;bottom:-23px;left:17px;-webkit-transform:rotate(-40deg);-ms-transform:rotate(-40deg);transform:rotate(-40deg);-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes rainbow{50%{-webkit-transform:rotate(50deg);transform:rotate(50deg)}}@keyframes rainbow{50%{-webkit-transform:rotate(50deg);transform:rotate(50deg)}}@-webkit-keyframes rainbow_shadow{50%{-webkit-transform:rotate(-50deg) translate(10px) scale(.7);transform:rotate(-50deg) translate(10px) scale(.7);opacity:.05}}@keyframes rainbow_shadow{50%{-webkit-transform:rotate(-50deg) translate(10px) scale(.7);transform:rotate(-50deg) translate(10px) scale(.7);opacity:.05}}
{% endhighlight %}
效果
彩虹
利用border-radius，box-shadow這兩個屬性來繪製彩虹（絕對定位佈局）。
CSS
{% highlight ruby %}
.rainbow{-webkit-animation:rainbow 5s ease-in-out infinite;animation:rainbow 5s ease-in-out infinite;border-radius:170px 0 0 0;box-shadow:#fb323c -2px -2px 0 1px,#f99716 -4px -4px 0 3px,#fee124 -6px -6px 0 5px,#afdf2e -8px -8px 0 7px,#6ad7f8 -10px -10px 0 9px,#60b1f5 -12px -12px 0 11px,#a3459b -14px -14px 0 13px;height:70px;width:70px;margin-left:-40px;position:absolute;left:610px;top:71px;-webkit-transform:rotate(40deg);-ms-transform:rotate(40deg);transform:rotate(40deg)}.rainbow:after{-webkit-animation:rainbow_shadow 5s ease-in-out infinite;animation:rainbow_shadow 5s ease-in-out infinite;background:#000;border-radius:50%;content:'';opacity:.2;height:15px;width:120px;position:absolute;bottom:-23px;left:17px;-webkit-transform:rotate(-40deg);-ms-transform:rotate(-40deg);transform:rotate(-40deg);-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes rainbow{50%{-webkit-transform:rotate(50deg);transform:rotate(50deg)}}@keyframes rainbow{50%{-webkit-transform:rotate(50deg);transform:rotate(50deg)}}@-webkit-keyframes rainbow_shadow{50%{-webkit-transform:rotate(-50deg) translate(10px) scale(.7);transform:rotate(-50deg) translate(10px) scale(.7);opacity:.05}}@keyframes rainbow_shadow{50%{-webkit-transform:rotate(-50deg) translate(10px) scale(.7);transform:rotate(-50deg) translate(10px) scale(.7);opacity:.05}}
{% endhighlight %}
效果圖
夜晚
利用絕對定位 starry 這個 DIV 負責畫星星背景，starry：after 負責畫出月亮（先畫出矩形長條，再用 border-radius 畫出 月牙）（絕對定位佈局）
CSS
{% highlight ruby %}
.starry{-webkit-animation:starry_star 5s ease-in-out infinite;animation:starry_star 5s ease-in-out infinite;background:#fff;border-radius:50%;box-shadow:#fff 26px 7px 0 -1px,rgba(255,255,255,0.1) -36px -19px 0 -1px,rgba(255,255,255,0.1) -51px -34px 0 -1px,#fff -52px -62px 0 -1px,#fff 14px -37px,rgba(255,255,255,0.1) 41px -19px,#fff 34px -50px,rgba(255,255,255,0.1) 14px -71px 0 -1px,#fff 64px -21px 0 -1px,rgba(255,255,255,0.1) 32px -85px 0 -1px,#fff 64px -90px,rgba(255,255,255,0.1) 60px -67px 0 -1px,#fff 34px -127px,rgba(255,255,255,0.1) -26px -103px 0 -1px;height:4px;width:4px;margin-left:-10px;opacity:1;position:absolute;left:777px;top:150px}.starry:after{-webkit-animation:starry 5s ease-in-out infinite;animation:starry 5s ease-in-out infinite;border-radius:50%;box-shadow:#fff -25px 0;content:'';height:100px;width:100px;position:absolute;top:-106px;-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}@-webkit-keyframes starry{50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@keyframes starry{50%{-webkit-transform:rotate(10deg);transform:rotate(10deg)}}@-webkit-keyframes starry_star{50%{box-shadow:rgba(255,255,255,0.1) 26px 7px 0 -1px,#fff -36px -19px 0 -1px,#fff -51px -34px 0 -1px,rgba(255,255,255,0.1) -52px -62px 0 -1px,rgba(255,255,255,0.1) 14px -37px,#fff 41px -19px,rgba(255,255,255,0.1) 34px -50px,#fff 14px -71px 0 -1px,rgba(255,255,255,0.1) 64px -21px 0 -1px,#fff 32px -85px 0 -1px,rgba(255,255,255,0.1) 64px -90px,#fff 60px -67px 0 -1px,rgba(255,255,255,0.1) 34px -127px,#fff -26px -103px 0 -1px}}@keyframes starry_star{50%{box-shadow:rgba(255,255,255,0.1) 26px 7px 0 -1px,#fff -36px -19px 0 -1px,#fff -51px -34px 0 -1px,rgba(255,255,255,0.1) -52px -62px 0 -1px,rgba(255,255,255,0.1) 14px -37px,#fff 41px -19px,rgba(255,255,255,0.1) 34px -50px,#fff 14px -71px 0 -1px,rgba(255,255,255,0.1) 64px -21px 0 -1px,#fff 32px -85px 0 -1px,rgba(255,255,255,0.1) 64px -90px,#fff 60px -67px 0 -1px,rgba(255,255,255,0.1) 34px -127px,#fff -26px -103px 0 -1px}}
{% endhighlight %}
效果圖
雷電
雷電的效果同理（絕對定位佈局），新增了一個雷電的效果，這裏能夠用 stormy:before 和 animation 去繪出這個效果。
CSS
{% highlight ruby %}
.stormy{-webkit-animation:stormy 5s ease-in-out infinite;animation:stormy 5s ease-in-out infinite;background:#222;border-radius:50%;box-shadow:#222 65px -15px 0 -5px,#222 25px -25px,#222 30px 10px,#222 60px 15px 0 -10px,#222 85px 5px 0 -5px;height:50px;width:50px;margin-left:-60px;position:absolute;left:947px;top:70px}.stormy:after{-webkit-animation:stormy_shadow 5s ease-in-out infinite;animation:stormy_shadow 5s ease-in-out infinite;background:#000;border-radius:50%;content:'';height:15px;width:120px;opacity:.2;position:absolute;left:5px;bottom:-60px;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}.stormy:before{-webkit-animation:stormy_thunder 2s steps(1,end) infinite;animation:stormy_thunder 2s steps(1,end) infinite;border-left:0 solid transparent;border-right:7px solid transparent;border-top:43px solid yellow;box-shadow:yellow -7px -32px;content:'';display:block;height:0;width:0;position:absolute;left:57px;top:70px;-webkit-transform:rotate(14deg);-ms-transform:rotate(14deg);transform:rotate(14deg);-webkit-transform-origin:50% -60px;-ms-transform-origin:50% -60px;transform-origin:50% -60px}@-webkit-keyframes stormy{50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes stormy{50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@-webkit-keyframes stormy_shadow{50%{-webkit-transform:translateY(20px) scale(1);transform:translateY(20px) scale(1);opacity:.05}}@keyframes stormy_shadow{50%{-webkit-transform:translateY(20px) scale(1);transform:translateY(20px) scale(1);opacity:.05}}@-webkit-keyframes stormy_thunder{0%{-webkit-transform:rotate(20deg);transform:rotate(20deg);opacity:1}5%{-webkit-transform:rotate(-34deg);transform:rotate(-34deg);opacity:1}10%{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:1}15%{-webkit-transform:rotate(-34deg);transform:rotate(-34deg);opacity:0}}@keyframes stormy_thunder{0%{-webkit-transform:rotate(20deg);transform:rotate(20deg);opacity:1}5%{-webkit-transform:rotate(-34deg);transform:rotate(-34deg);opacity:1}10%{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:1}15%{-webkit-transform:rotate(-34deg);transform:rotate(-34deg);opacity:0}}
{% endhighlight %}
效果圖
下雪
下雪的效果和下雨的效果除了顏色上不同以外（絕對定位佈局），只不過是把雨點的形狀變成了圓形。
CSS
{% highlight ruby %}
.snowy{-webkit-animation:snowy 5s ease-in-out infinite 1s;animation:snowy 5s ease-in-out infinite 1s;background:#fff;border-radius:50%;box-shadow:#fff 65px -15px 0 -5px,#fff 25px -25px,#fff 30px 10px,#fff 60px 15px 0 -10px,#fff 85px 5px 0 -5px;display:block;height:50px;width:50px;margin-left:-60px;position:absolute;left:1112px;top:70px}.snowy:after{-webkit-animation:snowy_shadow 5s ease-in-out infinite 1s;animation:snowy_shadow 5s ease-in-out infinite 1s;background:#000;border-radius:50%;content:'';height:15px;width:120px;opacity:.2;position:absolute;left:8px;bottom:-60px;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7)}.snowy:before{-webkit-animation:snowy_snow 2s infinite linear;animation:snowy_snow 2s infinite linear;content:'';border-radius:50%;display:block;height:7px;width:7px;opacity:.8;-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}@-webkit-keyframes snowy{50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes snowy{50%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@-webkit-keyframes snowy_shadow{50%{-webkit-transform:translateY(20px) scale(1);transform:translateY(20px) scale(1);opacity:.05}}@keyframes snowy_shadow{50%{-webkit-transform:translateY(20px) scale(1);transform:translateY(20px) scale(1);opacity:.05}}@-webkit-keyframes snowy_snow{0%{box-shadow:rgba(238,238,238,0) 30px 30px,rgba(238,238,238,0) 40px 40px,#eee 50px 75px,#eee 55px 50px,#eee 70px 100px,#eee 80px 95px,#eee 110px 45px,#eee 90px 35px}25%{box-shadow:#eee 30px 45px,#eee 40px 60px,#eee 50px 90px,#eee 55px 65px,rgba(238,238,238,0) 70px 120px,rgba(238,238,238,0) 80px 120px,#eee 110px 70px,#eee 90px 60px}26%{box-shadow:#eee 30px 45px,#eee 40px 60px,#eee 50px 90px,#eee 55px 65px,rgba(238,238,238,0) 70px 40px,rgba(238,238,238,0) 80px 20px,#eee 110px 70px,#eee 90px 60px}50%{box-shadow:#eee 30px 70px,#eee 40px 80px,rgba(238,238,238,0) 50px 100px,#eee 55px 80px,#eee 70px 60px,#eee 80px 45px,#eee 110px 95px,#eee 90px 85px}51%{box-shadow:#eee 30px 70px,#eee 40px 80px,rgba(238,238,238,0) 50px 45px,#eee 55px 80px,#eee 70px 60px,#eee 80px 45px,#eee 110px 95px,#eee 90px 85px}75%{box-shadow:#eee 30px 95px,#eee 40px 100px,#eee 50px 60px,rgba(238,238,238,0) 55px 95px,#eee 70px 80px,#eee 80px 70px,rgba(238,238,238,0) 110px 120px,rgba(238,238,238,0) 90px 110px}76%{box-shadow:#eee 30px 95px,#eee 40px 100px,#eee 50px 60px,rgba(238,238,238,0) 55px 35px,#eee 70px 80px,#eee 80px 70px,rgba(238,238,238,0) 110px 25px,rgba(238,238,238,0) 90px 15px}100%{box-shadow:rgba(238,238,238,0) 30px 120px,rgba(238,238,238,0) 40px 120px,#eee 50px 75px,#eee 55px 50px,#eee 70px 100px,#eee 80px 95px,#eee 110px 45px,#eee 90px 35px}}@keyframes snowy_snow{0%{box-shadow:rgba(238,238,238,0) 30px 30px,rgba(238,238,238,0) 40px 40px,#eee 50px 75px,#eee 55px 50px,#eee 70px 100px,#eee 80px 95px,#eee 110px 45px,#eee 90px 35px}25%{box-shadow:#eee 30px 45px,#eee 40px 60px,#eee 50px 90px,#eee 55px 65px,rgba(238,238,238,0) 70px 120px,rgba(238,238,238,0) 80px 120px,#eee 110px 70px,#eee 90px 60px}26%{box-shadow:#eee 30px 45px,#eee 40px 60px,#eee 50px 90px,#eee 55px 65px,rgba(238,238,238,0) 70px 40px,rgba(238,238,238,0) 80px 20px,#eee 110px 70px,#eee 90px 60px}50%{box-shadow:#eee 30px 70px,#eee 40px 80px,rgba(238,238,238,0) 50px 100px,#eee 55px 80px,#eee 70px 60px,#eee 80px 45px,#eee 110px 95px,#eee 90px 85px}51%{box-shadow:#eee 30px 70px,#eee 40px 80px,rgba(238,238,238,0) 50px 45px,#eee 55px 80px,#eee 70px 60px,#eee 80px 45px,#eee 110px 95px,#eee 90px 85px}75%{box-shadow:#eee 30px 95px,#eee 40px 100px,#eee 50px 60px,rgba(238,238,238,0) 55px 95px,#eee 70px 80px,#eee 80px 70px,rgba(238,238,238,0) 110px 120px,rgba(238,238,238,0) 90px 110px}76%{box-shadow:#eee 30px 95px,#eee 40px 100px,#eee 50px 60px,rgba(238,238,238,0) 55px 35px,#eee 70px 80px,#eee 80px 70px,rgba(238,238,238,0) 110px 25px,rgba(238,238,238,0) 90px 15px}100%{box-shadow:rgba(238,238,238,0) 30px 120px,rgba(238,238,238,0) 40px 120px,#eee 50px 75px,#eee 55px 50px,#eee 70px 100px,#eee 80px 95px,#eee 110px 45px,#eee 90px 35px}}
{% endhighlight %}
效果圖
tips:我的的博客排版和風格更好，地址：https://haonancx.github.io/
是否是感受很酷？？？ 好了今天就到這兒，下篇文章見。
相關文章
- 1. 2019年的晴雨地圖
- 2. 貼吧表情雨
- 3. 遊戲：依然是騰訊市值的晴雨表？
- 4. dApp開發者堆棧：區塊鏈產業晴雨表
- 5. "雨淋"透了我的心情。
- 6. CSS3實現各種表情
- 7. CSS3實現各類表情
- 8. 單標籤！純CSS實現動態晴陰雨雪
- 9. css3寫下雨效果
- 10. HTML五、js、CSS3的自定義表情編輯器
- 更多相關文章...
- • SVN 解決衝突 - SVN 教程
- • XSD 限定 / Facets - XML Schema 教程
- • RxJava操作符（十）自定義操作符
- • Scala 中文亂碼解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. python的安裝和Hello，World編寫
- 2. 重磅解讀：K8s Cluster Autoscaler模塊及對應華爲雲插件Deep Dive
- 3. 鴻蒙學習筆記2（永不斷更）
- 4. static關鍵字 和構造代碼塊
- 5. JVM筆記
- 6. 無法啓動 C/C++ 語言服務器。IntelliSense 功能將被禁用。錯誤: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回碼狀態含義
- 8. Java樹形結構遞歸（以時間換空間）和非遞歸（以空間換時間）
- 9. 數據預處理---缺失值
- 10. 都要2021年了，現代C++有什麼值得我們學習的？
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 2019年的晴雨地圖
- 2. 貼吧表情雨
- 3. 遊戲：依然是騰訊市值的晴雨表？
- 4. dApp開發者堆棧：區塊鏈產業晴雨表
- 5. "雨淋"透了我的心情。
- 6. CSS3實現各種表情
- 7. CSS3實現各類表情
- 8. 單標籤！純CSS實現動態晴陰雨雪
- 9. css3寫下雨效果
- 10. HTML五、js、CSS3的自定義表情編輯器