CSS3 心情由晴雨表决定

animation-name 规定需要绑定到选择器的 keyframe 名称。。 animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function 规定动画的速度曲线。 animation-delay 规定在动画开始之前的延迟。 animation-iteration-count 规定动画应该播放的次数。 animation-direction 规定是否应该轮流反向播放动画。

线性渐变背景

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

HTML

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

首先，先让container这个垂直和水平居中，其次，7个晴雨表宽度为了保持一致，先计算100%/7 =14.285714…;约得于14.3%；然后使用线性渐变从左到右绘画出相应的颜色。

CSS

    .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%);}