html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标

CSS3动画属性并不是很多，但重点其实是你怎样去运用它，从简单的hover状态或复杂的小动画，都可以巧妙的用CSS3动画属性来实现。

今天主要是和大家分享一个比较有创意、实用的CSS天气图标动画，静态的天气图标看上去是很呆板，若加上动画，看起来会更加真实生动，以下例子就是很好的参考案例。

下面我们来做一个会下雨的天气图标实例，过程其实很简单哦。

STEP1: 整体HTML架构

复制代码代码如下:

STEP2: 用CSS绘制云朵图标CSS代码如下

复制代码代码如下:

body {

max-width: 42em;

padding: 2em;

margin: 0 auto;

color: #161616;

font-family: 'Roboto', sans-serif;

text-align: center;

background-color: currentColor;

}

.icon {

position: rela