CSS加载动画框架Loaders.css

最新推荐文章于 2024-08-09 08:21:52 发布

weixin_30670925

最新推荐文章于 2024-08-09 08:21:52 发布

阅读量151

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/izengbin/p/7122742.html

版权

Loaders.css是一款非常出色的加载动画框架，Loaders.css利用纯CSS可以实现很多种样式的Loading加载动画，这些动画并不需要图片来辅助，而是仅仅需要CSS即可实现，因此运行效率比较不错。

Loaders.css的特点

基于纯CSS，不需JavaScript脚本，也不需要图片，很干净。
默认提供近30个不同的Loading动画效果，你也可以发挥自己的想象来实现不同的加载动画。
Loaders.css比较轻巧，基本没什么臃肿的文件。
免费、开源，这是必须的。

下面是第一行第4个Loading动画的CSS代码，其他的大家可以在源代码中查看。

.ball-clip-rotate-pulse {
  position: relative;
  -webkit-transform: translateY(-15px);
  -ms-transform: translateY(-15px); transform: translateY(-15px); } /* line 262, stdin */ .ball-clip-rotate-pulse > div { -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; top: 0px; left: 0px; border-radius: 100%; } /* line 269, stdin */ .ball-clip-rotate-pulse > div:first-child { background: #fff; height: 16px; width: 16px; top: 9px; left: 9px; -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } /* line 277, stdin */ .ball-clip-rotate-pulse > div:last-child { position: absolute; border: 2px solid #fff; width: 30px; height: 30px; background: transparent; border: 2px solid; border-color: #fff transparent #fff transparent; -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -webkit-animation-duration: 1s; animation-duration: 1s; }