先放效果图....................................................................................... 废话不多说 首先，两个div，用来存放echarts 一、制作里面的动图 ...

需求 项目里有个消息中心，当有消息的时候，小铃铛图标可以晃两下，提示当前有信息。 实现过程 书写css 使用css的keyframe属性，配合animation。 js配合 我们实现的效果应该是一进来的时候 晃两下，数据更新之后晃两下。js如下： 设置定时器的目的是让下次还能 ...

上次简单的介绍了下如何用代码实现菊花旋转的加载动画，动画点击，这次继续我们的动画系列，实现另外一种加载动画，圆环旋转。与上次不同的是，菊花旋转是通过改变元素透明度来实现动画，这次因为考虑到元素叠加，加上元素本身带有背景色，如果改变透明度会影响效果，所以直接改变元素的背景颜色，加上适当的延时，就可以 ...

最近打算整理几个动画样式，最常见的就是我们用到的加载动画。加载动画的效果处理的好，会给页面带来画龙点睛的作用，而使用户愿意去等待。而页面中最常用的做法是把动画做成gif格式，当做背景图或是img标签来引用，这种方式最简单，也不会有兼容性的问题。不过本人有时爱折腾，看到一些动画的效果，不管是简单 ...

今天做的这个动画叫光盘旋转，名字自己取的。动画的效果估计很多人都很熟悉，就是微信朋友圈里的加载动画。做过前面几个动画，发现其实都一个原理，就是如何将动画的元素如何分离出来。这个动画的实现也很简单，关键点在于如何将元素拼凑成风车形状。然后定义动画的关键帧为rotate 360度，应用于整个元素 ...

今天整理的这个动画估计大家都不会陌生，彩环旋转，看过之后是不是觉得很熟悉，对，这个就是优酷视频APP里面的加载动画。本人空余时间喜欢看些视频，留意到这个动画后就想用代码实现出来，今天整理了下，跟大家分享，如果有大牛能提出更好的实现方法，欢迎补充。案例请在chrome中查看。 这个动画的实现 ...

效果： 　　 源码： 图片： ...

1、我们先设置两个盒子大小，颜色等等，然后定位重叠在一起，最后再进行动画设置 例子如下： 2、效果如下： ---恢复内容结束--- ...