weixin_33698043
weixin_33698043

CSS3 心情由晴雨表决定

虽然在国内使用 CSS3 距离还是有些远,但是我们也要学习这些新技术,今天为大家分享一些很酷的 CSS3 特效案例,用 CSS3 的新特性制作7个很酷的晴雨表动画。

GITHUB地址：css3-weather-barometer

废话少说，先上效果图

CSS3 心情由晴雨表决定_第1张图片

CSS3 主要技术栈

  • 线性渐变：-webkit-linear-gradient

  • 动画属性：animation

（这篇文章需要一些掌握 CSS3 动效基础的童鞋学习）

科普

  • animation-name 规定需要绑定到选择器的 keyframe 名称。。

  • animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

  • animation-timing-function 规定动画的速度曲线。

  • animation-delay 规定在动画开始之前的延迟。

  • animation-iteration-count 规定动画应该播放的次数。

  • animation-direction 规定是否应该轮流反向播放动画。

线性渐变背景

一共7个动画，就把它们都放在一块儿，并成一排吧。

HTML

{% highlight ruby %}

{% 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 %}

效果

CSS3 心情由晴雨表决定_第2张图片

晴天

先分解这个动效，一个外发光的圆，旋转的两条矩形的光影（绝对定位布局）；这里用到 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 %}

效果

CSS3 心情由晴雨表决定_第3张图片

多云

这个"多云" 主要由云朵和由小到大变化的阴影组成（绝对定位布局），这里我用 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 %}

效果

CSS3 心情由晴雨表决定_第4张图片

有雨

有雨的效果除了颜色上和多云不一样之外（绝对定位布局），新增了一个下雨的效果，这里可以用 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 %}

效果

CSS3 心情由晴雨表决定_第5张图片

彩虹

利用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 %}

效果图

CSS3 心情由晴雨表决定_第6张图片

夜晚

利用绝对定位 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 %}

效果图

CSS3 心情由晴雨表决定_第7张图片

雷电

雷电的效果同理（绝对定位布局），新增了一个雷电的效果，这里可以用 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 %}

效果图

CSS3 心情由晴雨表决定_第8张图片

下雪

下雪的效果和下雨的效果除了颜色上不一样之外（绝对定位布局），只不过是把雨点的形状变成了圆形。

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 %}

效果图

CSS3 心情由晴雨表决定_第9张图片

tips:个人的博客排版和风格更好，地址：https://haonancx.github.io/

是不是感觉很酷？？？ 好了今天就到这儿，下篇文章见。

你可能感兴趣的:(CSS3 心情由晴雨表决定)

  • 芦花鞋一四 许叶晗
    又是在一个寒冷的夏日里，青铜和葵花决定今天一起去卖芦花鞋，奶奶亲手给他们做了一碗热乎乎的粥对他们说:“就靠你们两挣生活费了这碗粥赶紧趁热喝了吧！”于是青铜和葵花喝完了奶奶给她们做的粥，就准备去镇上卖卢花鞋，这回青铜和葵花穿着新的芦花鞋来到了镇上。青铜这回看到了很多人都在卖，用手势表达对葵花说:“这回有好多人在抢我们生意呢！我们必须得吆喝起来。”葵花点了点头。可是谁知他们也大声的叫，卖芦花喽！卖芦花
  • 铭刻于星（四十二） 随风至
    69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
  • 《投行人生》读书笔记 小蘑菇的树洞
    《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
  • 《大清方方案》| 第二话 谁佐清欢
    和珅究竟说了些什么？竟能令堂堂九五之尊龙颜失色！此处暂且按下不表；单说这位乾隆皇帝，果真不愧是康熙从小带过的，一旦决定了要做的事，便杀伐决断毫不含糊。他当即亲自拟旨，着令和珅为钦差大臣，全权负责处理方方事件，并钦赐尚方宝剑，遇急则三品以下官员可先斩后奏。和珅身负皇上重托，岂敢有半点怠慢，当夜即率领相关人等，马不停蹄杀奔江汉。这一路上，和珅的几位幕僚一直在商讨方方事件的处置方案。有位年轻幕僚建议快刀
  • 放下是一段成长的修行 小莳玥
    人来到这个世界上，只有两件事：生和死。一件事已经做完了，另一件你还急什么呢?是人，都有七情六欲。是心，都有喜怒哀乐，这些再正常不过了。别总抱怨自己活得累，过得辛苦。永远记住：舒坦是留给死人的。苦，才是生活；累，才是工作；变，才是命运；忍，才是历练；容，才是智慧；静，才是修养；舍，才会得到；做，才会拥有。人生，活得太清楚，才是最大的不明白。有些事，看得很清，却说不清；有些人，了解很深，却猜不透；有些
  • 《中华小厨师》单行VS爱藏：姜是老的辣，书是新的好 cicoky
    《汉书·郦食其传》有曰：“王者以民为天，而民以食为天。”自古以来，吃饱饭是每一个人的基本要求，而吃好饭却是每一个人的最终追求。于是，厨师这一职业孕育而生，其渊源之久，甚至可追溯到4000年前的奴隶时代。职业本身无贵贱，但职业能力却有高低之分。所以一家餐馆生意好不好，厨师的水平决定一切，而站在所有厨师顶端的就被称之为“特级厨师”。今天要说的就是一个关于“特级厨师刘昴星”的故事。连载历程1995年第4
  • 想明白这个问题，你才能写下去 文自拾
    春节放假的时候，又有一天梦见她，第二天她冒着漫天大雪，傻傻地跑来见我。她说，见见傻傻的我，天很冷，心很暖。她回去后，我写了一篇文章，题目叫——从此梦中只有你。我们没在一起的很长一段时间里，她都在我的心底，一次次出现在我的梦里。我对她说，在一起之前，是胆小且闷骚，在一起之后，我变得不要脸了。不要脸的——去爱你。那文章没写完，火车上，给她看了。我有点小失望，花了好几个小时写，她分分钟就看完，很希望她逐
  • 有舍才有得 _清净_
    为什么经常讲放下？放下就是让你要舍得、舍去。喜舍心就是把自己喜欢的，用慈悲心喜舍出去。这就锻炼了你们在人间，学会放下原本不舍得的东西或一些事物，学会舍出去，学会帮助别人，学会多付出。你今天付出了慈悲心、喜舍心，以后会得到更多的缘助力。缘助力是什么？——贵人缘啊。今天没有付出，不懂得付出，什么都只会想到自己，那你也得不到缘助力。慈悲喜舍就是用慈悲心去帮助别人，用喜舍心去付出，最后也会得到别人回报。别
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • 读书||陶新华《教育中的积极心理学》1—28 流水淙淙2022
    读一本好书，尤如和一位高尚者对话，亦能对人的精神进行洗礼。但是若不能和实践结合起来，也只能落到空读书的状态。读书摘要与感想1、塞利格曼在《持续的幸福》一书中提出了幸福2.0理论，提出幸福由5个元素决定——积极情绪、投入的工作和生活、目标和意义、和谐的人际关系、成就感。2、人的大脑皮层在进行智力活动时，都伴有皮下中枢活动，对这些活动进行体验请假，并由此产生了情感解读。人的情绪情感体验总是优先于大脑的
  • 其二 十八尾喵
    你知道吗？图片发自App我今天知道了你有喜欢的人，不是我。心空空的，整个人都不是我的了。可，怎么办？还是要好好的活着，毕竟你喜欢的人，我不能杀，可是我可以杀其他喜欢你的人呀！也罢，此生无缘，来世再见。鱼干
  • MongoDB Oplog 窗口 喝醉酒的小白 MongoDB运维
    在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限
  • 没想到，真没想到 一棵落花的树
    生活中，每一件小事都蕴藏着他的道理。有些令你意外，却能让你收到更为意外的结果。那一次，我真没想到的事，让我收获了爱。记忆的雨飘落下来，扰乱了我平静的心湖。那是一次数学考试，我破天荒地考了“99”分。我不禁沾沾自喜，这成绩我可不容易得到，妈妈一定会好好表扬我的。回到家，我想妈妈得意的报出成绩，妈妈只是淡淡的说：“嗯，等会儿试卷拿给我看看。”做完作业，我把试卷拿给了妈妈。只见妈妈捧着试卷，眯着眼睛盯着
  • 2020-12-16 长寿富贵
    9：56不知今天哪位亲来说说话呀？成萌：尽尽皆是道。道道皆相同。不解呀？成萌：郁郁不得志，混混过日子。哦……说谁的呀？成萌：说自己呀……还能说谁呢？那如何办呢？成萌：回头……如何回头？成萌：回见心源。如何回见心源？成萌：不追不随诸相迁，如如不动在心田。啊？成萌：慢慢守心吧。
  • 锁之缘 尘缘诗词原创作品
    是谁追寻梦的足迹，是谁在偷偷的哭泣，日月隔离在黑白天地情感在心中蔓延的痕迹天与地的距离有多远流失的星晨落入哪片空间不要让泪水模糊双眼心牢中一样充满温暖谁说爱情没有永远白娘子又为何爱许仙蝴蝶墓地展翅翩翩轻歌慢舞袖卷人间传奇千古留爱万年…………月落星飞徘徊是选择不去问自已为合舍不得寂寞本就是痛苦的不在追寻梦中的痕迹才不会失去真实的自已
  • 想家，想念家乡的四季 三妹杨敏
    不知道，为什么，这次我回自己出生地—老家，反倒有了一种出差走亲戚的感觉。人啊，出来得久了，就生分了。就不再那么心贴着心脸对着脸了。需要时间，需要机缘，需要我们再重新把自己的思维重置一遍，你才能够转得回这个弯儿的。最好的转弯儿，不是说教，也不是余旧，都有些治标不治本。真正管用的东西，只有一样。也简单。一个字：吃。吃一顿家乡的饭，喝一口家乡的水，听一听那浓重得有些陌生的乡音，心就回来了。心回来，人才算
  • 学霸父母学渣娃，这孩子真是亲生的？太扎心了！ 东北SK皇家成长中心
    现在的社会，每个家庭基本都把孩子的教育放在第一位，哪怕父母平时上班再苦再累也不敢在孩子的教育上有丝毫的马虎，平时对孩子的照顾真的是无微不至，每天早起送孩子上学，晚上回家辅导孩子写作业，有的父母的文化程度非常高，但是每每到了辅导孩子写作业这个时候，父母们内心都有这样一种想法，这个孩子真的是我亲生的吗？真想一巴掌拍死他，我上辈子是做了什么孽生出这么一个智障的孩子，家里每每就要上演全武行，看看这些孩子到
  • 2021-11-15 宙火
    我给宋小姐写了首诗，是我在课上因思恋宋小姐而写的。“自古多情是唐宋，从来双飞归巢燕。邻家小女相聘婷，常使春意荡漾我。不知单思可为爱，惟愿一心付之汝。”我拿给宋小姐看了，她说我写得很棒。我很开心，但又不是那么开心。宋小姐是回复我了，但也只是说我写得很棒，对我诗句中蕴藏的真切感情，不知道是真的没发现，还是装作没发现。但我不深究，只是这样，我就很开心了。我答应宋小姐，一天给她写一首诗。
  • 2019-01-19 王小康KK
    姓名:王康公司:扬州市方圆建筑工程有限公司2018年3月16日～3月18日上海361期《六项精进》感谢二组学员【日精进打卡第307天】【知～学习】《六项精进》大纲3遍共862遍《大学》通篇3遍共860遍《六项精进》全书40页【经典名句】思想决定行为，行为决定习惯，习惯决定性格，性格决定命运。【行～实践】一、修身：（对自己个人）1、践行六项精进的理念。二、齐家：（对家庭和家人）1、和女朋友视频聊天。
  • 在Ubuntu中编译含有JSON的文件出现报错 芝麻糊76 Linuxkill_buglinuxubuntujson
    在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
  • 男女关系里的13条真理 梦仔i
    1、爱情是一种神奇的力量，会使人从哪里摔倒就从哪里爬起来，除非摔得感情残废了。2、男的追女的，只要男的坚持不懈，最后一般可以追到；而女的追男的，只要男的不愿意，肯定追不到；因为男人皮较厚、心较硬，而女人则相反。3、男人往往可以同时有几个同性好朋友，这些朋友可以互相认识或不认识，可以相差很大；而女人的同性好朋友往往只能有一个，且是排他的。男人的朋友可以是有男有女且年长年幼的，而女人的朋友大多是男的且
  • 【勾心原创】《去年夏天》 不勾心的豆角
    （原创作者：不勾心的豆角）本期【勾心原创】，继续本人不勾心的豆角的现代诗创作之旅。《去年夏天》原创作者：不勾心的豆角那里芳草茵茵绿柳成行澄净蓝天下屋顶们相亲相爱闪着橙色紫色的馨香溪流温柔偎依着村庄牛儿羊儿信步徜徉还有成群的白鸽在尖顶的教堂盘旋歌唱孩子们是自由的蒲公英奔跑在希望的田野上任由天真的笑声肆无忌惮烂漫这人间天堂夜幕小心翼翼呵护着甜美的梦乡只剩尽职的晚风陪伴顽皮的星子们游荡快告诉我心爱的姑娘
  • 《经年驯养》黎栀傅谨臣（高分女频）全章节在线阅读 云轩书阁
    《经年驯养》黎栀傅谨臣（高分女频）全章节在线阅读主角：黎栀傅谨臣简介：傅谨臣养大黎栀，对她有求必应，黎栀以为那是爱。结婚两年才发现，她不过他豢养最好的一只宠物，可她拿他当全世界。关注微信公众号【看精灵】去回个书號【9328】，即可阅读【经年驯养】小说全文！第10章温柔的眼神，宠溺的动作，留恋的话近乎情人低语。是黎栀做梦都想要的一切……她口干舌燥，紧张难言。一颗心似被浸泡在温水里，酥麻舒适，无可抗拒
  • 2022-08-28 蔚蓝一片晴
    初三暑假培训收获点滴从8月25至8月27日三天两晚的培训结束了，回到家中，该静下心来整理一下触动心灵的收获，成为成长的积淀。1.在优秀团队中快速成长与提升，做一名反思成长型教师一名专业型教师的教学指导包括了教学原理知识、案例知识、策略知识。面对教学中的遇到的有趣的情形、问题会去研究其理，寻找更好的教法学法对策。从新手到成熟型教师，再走向专业型教师，需要的是觉醒与反思，多进行案例研究，从案例中观察、
  • 在一起的日子 少些期待
    在一起已经三年多了，我是一个97年的摩羯座女生，他是一个89年的同样的摩羯座男生，刚开始是他追的我，我开始对他也挺有好感的，他从他朋友哪里，要到我的电话号，给我发信息，我没理他。然后我们的故事就这样开始了·····我不记得到底是什么，让我对他特别喜欢，想一心一意跟着他过日子，说白了我也就是个他的小跟班，又或者是个小跟屁虫，或者是个保姆，反正就是他在那里，我就得陪他到哪里，谈了半年多对象的时候，他因
  • 《太虚游》第六十二章。玄牝之威。 古楼臭道士
    “好好好，流云这孩子深得我心，想必长爻知道是你的话定然会惊喜不已的。”白玄牝听得风流云应了下来，脸色慈和，伸手在他头顶轻轻抚了抚，如同抚在怀中九尾小狐一样自然，极其温柔。身后的四位青丘长老同时一怔，嘴角微动，似要开口劝阻。风流云只感到一道霞光瑞气如有实质一般顺着头顶百会大穴直沉在下丹田内，随后这股气息又逐渐凝聚，似乎给自己吃了什么东西一般。啊喔不好，这祖奶奶该不会是看中我这肉身，像人魔一样，要给她
  • 三梦 | 心碎了还是醉了 培根不是肉
    今天，让我一起走进彝族火把节。图片发自App“中国彝族火把节之乡·2016布拖民间火把节”在离学校走约一个时辰路程的地方举行，奔着要在如此隆重的节日之中好好欣赏一番的目的，三梦团队一早便和随队的两个孩子整装待发。图片发自App第一部分:吉尔吉呷我万万没有想到，从踏出校门开始，从我牵上那个孩子的手开始，我心的触动就没有停过。图片发自App我以为我这一路会在观察、拍照和思考中度过，但我发现我错了。这个
  • 母亲节如何做小红书营销 美橙传媒
    小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
  • 快节奏 地方天圆
    现在生活都是快节奏，使人来不及品味生活中的酸甜苦辣。交通、通讯、办公条件的高度发达，缩短了距离，节省了时间，提高了效率，但同时也使人成为缺少思考的动物，成为流水线上的一道工序。人人都有干不完的活、接不完的电话、参加不完的应酬。工作，急匆匆；办事，急匆匆；走路，急匆匆；吃饭，急匆匆；走亲串友，急匆匆；就连说话、甚至睡觉也都是急匆匆。快节奏的环境，使我们养成了快节奏的思维、习惯、心态，很难静下心来，认
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他