标签归档:Loading动画

纯CSS3花瓣样式的Loading加载动画

之前我们分享过很多基于纯CSS3的Loading加载动画,有的是Loading动画小图标,有的是进度条动画,这些在延迟加载的页面和复杂耗时操作上非常实用。这次我们要分享另外一款富有创意的纯CSS3花瓣样式的Loading加载动画,它的外观是一个花瓣形状的小图标,页面加载时花瓣小图标会不停旋转,并且在花瓣下方显示一个进度条。

css3-flower-loading

在线演示源码下载

HTML5 Canvas奇幻色彩Loading加载动画

之前我们分享过很多基于CSS3的Loading加载动画,通过CSS3的高级特性,可以制作出形态各异的Loading加载动画组件。今天给大家带来的这款Loading加载动画是基于HTML5 Canvas的,在canvas画布上,我们动态绘制许多多边形,这些多边形伴随着颜色的随机变化和旋转,形成了奇幻色彩的视觉效果,是一款非常炫酷的HTML5 Loading动画特效。

html5-canvas-color-loading

在线演示源码下载

纯CSS3模拟谷歌Loading加载动画

我们已经为大家分享过很多基于纯CSS3的Loading加载动画了,大部分都是一些简单的几何图形组合而成的循环播放动画,例如这个纯CSS3方块翻转效果的Loading加载动画就是通过简单的这方形叠加形成的动画。今天给大家带来另外一款模拟谷歌的纯CSS3 Loading加载动画,一共有6种动画效果。

pure-css3-google-loading

在线演示源码下载

HTML5 Canvas 3D跳动Loading加载动画 可调节参数

我们用CSS3制作过很多炫酷的Loading加载动画,比如这款纯CSS3漩涡样式的Loading加载动画CSS3发光线条旋转Loading加载动画。这次要分享的是一款基于HTML5 Canvas的3D跳动Loading加载动画,它的另一个特点是可以动态调节动画参数。

html5-canvas-3d-loading

在线演示源码下载

纯CSS3漩涡样式的Loading加载动画

最近我们分享过几个很酷的纯CSS3 Loading加载动画,比如这款CSS3发光线条旋转Loading加载动画纯CSS3实现的六边形加载动画都非常漂亮。这次我们介绍一个漩涡样式的CSS3 Loading加载动画,它在加载的时候就像一个炫酷在旋转,同时中间有一个loading字样表示在加载内容。

pure-css3-swirl-loading

在线演示源码下载

纯CSS3方块翻转效果的Loading加载动画

关于Loading动画,我们之前已经分享过很多了,大部分都是纯CSS3实现的,比如这款纯CSS3实现的六边形加载动画就非常不错,还有更早以前分享的纯CSS3发光圆环Loading加载动画也很酷。这次给大家带来的也是一款基于纯CSS3实现的方块翻转效果的Loading加载动画,若干个小方块组成一个阵列,然后各自按指定方向翻转,这样循环后就形成了Loading加载的动画效果。

pure-css3-cube-loading

在线演示源码下载

CSS3发光线条旋转Loading加载动画

最近,我们刚刚分享过一款纯CSS3实现的六边形加载动画,这种利用几何图形实现Loading动画的创意还是不错的。这次我们要分享的也是一款基于纯CSS3的Loading加载动画,它由2条逆向旋转的发光线条组成,在黑色的背景下,这种发光的动画显得更加漂亮。

css3-shine-line-loading

在线演示源码下载

纯CSS3实现的六边形加载动画

之前我们分享过很多样式各异的CSS3 Loading动画,例如这个纯CSS3五彩Loading加载动画CSS3液体形态的Loading动画。这次给大家带来另外一个基于纯CSS3的六边形加载动画,这个Loading动画的特点是有许多个小的六边形组合成一个大六边形,在等待加载的时候小六边形和大六边形之间不停的组合切换。

pure-css3-hexagon-loading

在线演示源码下载

SVG螺旋式扩散的Loading加载动画

SVG在绘制网页矢量图方面非常强大,甚至是一些矢量动画也是相当不错。之前我们分享过一些比较实用的SVG Loading动画,比如这个HTML5 SVG Loading 动画加载特效和这款富有创意的CSS3/SVG沙漏式Loading加载动画。这次我们要给大家分享的是另外一款基于SVG和JavaScript的螺旋式扩散的Loading加载动画,这个Loading动画非常适合页面加载时的等待动画。

svg-spiral-loading

在线演示源码下载

5组炫酷的纯CSS3 Loading加载动画

之前我们为大家分享过很多基于纯CSS3的Loading加载动画,你可以在10组蓝色风格的纯CSS3 Loading动画图标这篇文章中找到许多实用的CSS3 Loading动画。这次我们再给大家分享5组炫酷的纯CSS3 Loading加载动画,这些Loading动画都非常快速,是一款快进版的CSS3 Loading动画。

5-cool-css3-loading-animation

在线演示源码下载