点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

好雨知时节，当春乃发生。 随风潜入夜，润物细无声。

春节已经过去，新的一年刚刚开始，小伙伴们，今年你的目标是什么？定个小目标，挣它一个亿？分享一下我的目标，是让大家的web前端能力，更上一层楼。

还没出现css动画效果之前要实现动的图标，一般都是插入一张gif的图片去实现，随着CSS3技术的流行，现在越来越多比较高级炫酷的网页效果呈现，今天用css代码实现一组天气网站常用到的图标！

如下：

预览起来是可以动起来的，这里只截静态图片！

实现方法

html结构：

CSS 实现动画效果，原来这么简单

以前做动画效果很麻烦，但现在使用CSS3很容易做出动画效果。

CSS3 （transition）转换允许我们在给定的持续时间内从一个属性值更改为另一个，这不就是一个动画么。有以下几个参数可供选择：transition-property - 指定要转换的属性transition-duration - 指定转换应该发生的持续时间transition-timing-function - 指定转换速度如何在其持续时间transition-delay上改变 - 指定延迟（以秒为单位）过渡效果在下面的例子中，我们设置过渡属性来变换，具有持续时间为5秒，慢启动的过渡效果。

定义和用法

一些 CSS 属性是可以有动画效果的，这意味着它们可以用于动画和过渡。

动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit-, -moz-, 或 -o- 指定了第一个支持该属性的浏览器版本前缀。

CSS动画特效

当我们在浏览一个网站的时候，总是发现一些有意思的特效，如鼠标放在文字上会跳动等等。对于CSS动画特效较差的同学和一些后端同学来实现这些功能，可能有些吃力了。

animate.css

animate.css是一个CSS动画库，他有我们常见的CSS动画。

最近接到公司小程序项目首页迭代改版的工作，涉及到文章图文布局改版。主要是精选文章，在首页推广入口增加评论弹幕效果，后端弹幕数据是随文章列表接口一次性返回给前端，由前端来处理弹幕数据及相关弹幕交互效果。

随后，简单分析了一下后端接口的数据结构，以及查询了一些传统web端弹幕的js实现方式。

css3利用新加的属性能实现一些高端大气的动画效果，比如css3新加动画属性：transform、transition、animation .而且不用涉及到JS代码，单纯的CSS就可以实现动画功能。

首先讲解下这几个动画属性的作用：

transform2d , transform3d

甜甜圈动画

http://jsfiddle.net/rd4L30m8/

大小圆点动画

http://jsfiddle.net/rd4L30m8/1/