CSS3实现8种Loading效果【第二波】

原文:CSS3实现8种Loading效果【第二波】

今晚吃完饭回宿舍又捣鼓了另外几种Loading效果，老规矩，直接“上菜“……

注：gif图片动画有些卡顿，非实际效果！

PS：若要转载请注明出处，尊重一下作者！

第一种效果：

代码如下：

<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>

       .loading{width: 80px;height: 40px;margin: 0 auto;margin-top:100px;}.loading span{display: inline-block;width: 8px;height: 100%;border-radius: 4px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%,100%{height: 40px;background: lightgreen;}50%{height: 60px;margin-top: -20px;background: lightblue;}}.loading span:nth-child(2){-webkit-animation-delay:0.13s;}.loading span:nth-child(3){-webkit-animation-delay:0.26s;}.loading span:nth-child(4){-webkit-animation-delay:0.39s;}.loading span:nth-child(5){-webkit-animation-delay:0.52s;}

第二种效果：

代码如下：

<div class="loading"><span></span>
</div>

.loading{width: 80px;height: 80px;border-radius: 50%;margin: 0 auto;margin-top:100px;position: relative;border:5px solid lightgreen;-webkit-animation: turn 2s linear infinite;}.loading span{display: inline-block;width: 30px;height: 30px;border-radius: 50%;background: lightgreen;position: absolute;left: 50%;margin-top: -15px;margin-left: -15px;-webkit-animation: changeBgColor 2s linear infinite;}@-webkit-keyframes changeBgColor{0%{background: lightgreen;}100%{background: lightblue;}}@-webkit-keyframes turn{0%{-webkit-transform: rotate(0deg);border-color: lightgreen;}100%{-webkit-transform: rotate(360deg);border-color: lightblue;}}

第三种效果：

代码如下：

<div class="loading"><span></span><span></span><span></span><span></span><span></span>
</div>

.loading{width: 150px;height: 15px;margin: 0 auto;margin-top:100px;text-align: center;}.loading span{display: inline-block;width: 15px;height: 100%;margin-right: 5px;background: lightgreen;-webkit-animation: load 1.04s ease infinite;}.loading span:last-child{margin-right: 0px; }@-webkit-keyframes load{0%{opacity: 1;-webkit-transform: scale(1.2);}100%{opacity: .2;-webkit-transform: scale(.2);}}.loading span:nth-child(1){-webkit-animation-delay:0.13s;}.loading span:nth-child(2){-webkit-animation-delay:0.26s;}.loading span:nth-child(3){-webkit-animation-delay:0.39s;}.loading span:nth-child(4){-webkit-animation-delay:0.52s;}.loading span:nth-child(5){-webkit-animation-delay:0.65s;}

第四种效果：

代码如下：

<div class="loading"><span></span>
</div>

.loading{width: 150px;height: 8px;border-radius: 4px;margin: 0 auto;margin-top:100px;position: relative;background: lightblue;overflow: hidden;}.loading span{display:block;width: 100%;height: 100%;border-radius: 3px;background: lightgreen;-webkit-animation: changePosition 4s linear infinite;}@-webkit-keyframes changePosition{0%{-webkit-transform: translate(-150px);}50%{-webkit-transform: translate(0);}100%{-webkit-transform: translate(150px);}}

第五种效果：

代码如下：

<div class="loading"><span></span>
</div>

.loading{width: 200px;height: 60px;margin: 0 auto;margin-top: 100px;position: relative;}.loading span{width: 50px;height: 30px;border-radius: 50%;background: lightgreen;position: absolute;top: 50%;margin-top: -15px;overflow: hidden;-webkit-animation: changePosition 2.08s linear infinite;}@-webkit-keyframes changePosition{0%,100%{-webkit-transform: translate(70px);}20%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(0px);}30%{width: 20px;height: 60px;margin-top:-30px;-webkit-transform: translate(0px);}35%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(5px);background: lightblue;}70%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(160px);}80%{width: 20px;height: 60px;margin-top:-30px;-webkit-transform: translate(160px);}85%{width: 50px;height: 30px;margin-top:-15px;-webkit-transform: translate(155px);background: lightgreen;}}

第六种效果：

代码如下：

<div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>

.loadEffect{width: 100px;height: 100px;position: relative;margin: 0 auto;margin-top:100px;}.loadEffect span{display: inline-block;width: 30px;height: 10px;border-top-left-radius: 5px;border-bottom-left-radius: 5px;background: lightgreen;position: absolute;-webkit-animation: load 1.04s ease infinite;}@-webkit-keyframes load{0%{opacity: 1;}100%{opacity: 0.2;}}.loadEffect span:nth-child(1){left: 0;top: 50%;margin-top:-5px;-webkit-animation-delay:0.13s;}.loadEffect span:nth-child(2){left: 10px;top: 20px;-webkit-transform: rotate(45deg);-webkit-animation-delay:0.26s;}.loadEffect span:nth-child(3){left: 50%;top: 10px;margin-left: -15px;-webkit-transform: rotate(90deg);-webkit-animation-delay:0.39s;}.loadEffect span:nth-child(4){top: 20px;right:10px;-webkit-transform: rotate(135deg);-webkit-animation-delay:0.52s;}.loadEffect span:nth-child(5){right: 0;top: 50%;margin-top:-5px;-webkit-transform: rotate(180deg);-webkit-animation-delay:0.65s;}.loadEffect span:nth-child(6){right: 10px;bottom:20px;-webkit-transform: rotate(225deg);-webkit-animation-delay:0.78s;}.loadEffect span:nth-child(7){bottom: 10px;left: 50%;margin-left: -15px;-webkit-transform: rotate(270deg);-webkit-animation-delay:0.91s;}.loadEffect span:nth-child(8){bottom: 20px;left: 10px;-webkit-transform: rotate(315deg);-webkit-animation-delay:1.04s;}

第七种效果：

代码如下：

<div class="loadEffect"><div><span></span></div><div><span></span></div><div><span></span></div><div><span></span></div>
</div>

.loadEffect {width: 100px;height: 100px;margin: 0 auto;margin-top:100px;position: relative;}.loadEffect div{width: 100%;height: 100%;position: absolute;-webkit-animation: load 2.08s linear infinite;}.loadEffect div span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: lightgreen;position: absolute;left: 50%;margin-top: -10px;margin-left: -10px;}@-webkit-keyframes load{0%{-webkit-transform: rotate(0deg);}10%{-webkit-transform: rotate(45deg);}50%{opacity: 1;-webkit-transform: rotate(160deg);}62%{opacity: 0;}65%{opacity: 0;-webkit-transform: rotate(200deg);}90%{-webkit-transform: rotate(340deg);}100%{-webkit-transform: rotate(360deg);}}.loadEffect div:nth-child(1){-webkit-animation-delay:0.2s;}.loadEffect div:nth-child(2){-webkit-animation-delay:0.4s;}.loadEffect div:nth-child(3){-webkit-animation-delay:0.6s;}.loadEffect div:nth-child(4){-webkit-animation-delay:0.8s;}

第八种效果：

代码如下：

<div class="loading"><div><span></span></div><div><span></span></div><div><span></span></div>
</div>

.loading{width: 60px;height: 60px;margin: 0 auto;margin-top:100px;position: relative;-webkit-animation: load 3s linear infinite;}.loading div{width: 100%;height: 100%;position: absolute;}.loading span{display: inline-block;width: 20px;height: 20px;border-radius: 50%;background: #99CC66;position: absolute;left: 50%;margin-top: -10px;margin-left: -10px;-webkit-animation: changeBgColor 3s ease infinite;}@-webkit-keyframes load{0%{-webkit-transform: rotate(0deg);}33.3%{-webkit-transform: rotate(120deg);}66.6%{-webkit-transform: rotate(240deg);}100%{-webkit-transform: rotate(360deg);}}@-webkit-keyframes changeBgColor{0%,100%{background: #99CC66;}33.3%{background: #FFFF66;}66.6%{background: #FF6666;}}.loading div:nth-child(2){-webkit-transform: rotate(120deg);}.loading div:nth-child(3){-webkit-transform: rotate(240deg);}.loading div:nth-child(2) span{-webkit-animation-delay: 1s;}.loading div:nth-child(3) span{-webkit-animation-delay: 2s;}

PS：同样的，CSS样式代码没怎么整理，虽然东西简单，但是也是需要一些时间去做出来。所以，欢迎转载和使用，不过转载还是得注明一下出处，谢谢！

posted on 2015-07-07 09:48 NET未来之路阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/4626087.html

CSS3实现8种Loading效果【第二波】相关推荐

【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
css实现loading,CSS3实现18种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- 第1种效果: 代码如下: .loading{ width: 80px; height: 40px; ...
css实现loading,CSS3实现10种Loading效果
很适合菜鸟,果断搬过来了. 第1种效果: 代码如下: html css .loading{ width: 80px; height: 40px; margin: 0 auto; margin-top: ...
CSS3实现18种Loading效果
在网上看到一篇文章,css实现loading的效果,特此整理代码方便以后使用. 第1种效果: <div class="loading"><span>< ...
HTML5+CSS3 最酷的 loading 效果汇总
用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收 ...
css实现loading,css3 实现loading效果
1 圆点渐入渐出要点: 缩放和透明度的变化,循环变化 .demo1{ width: 40px; height: 40px; margin: 0 auto; border-radius: 100px; ...
html5 加载svg,HTML5 SVG应用（1）——loading效果
先看一下效果: 链接代码: y="0px" width="40px" height="40px" viewBox="0 0 40 ...
常见图像格式类型区别及使用说明绝对路径和相对路径的使用场景css3实现loading效果
经前两天晚上的提问,胡老师给我留下了两个问题: 1. JPEG PNG GIF等图像格式的区别和使用情况: 2. 绝对路径和相对路径的使用场景: 3. 如何用非GIF动画实现loading效果: 以下 ...
php手绘功能,基于纯CSS3的6种手绘涂鸦按钮效果
简要教程这是一组非常有趣的纯CSS3手绘风格卡通按钮设计效果.这组手绘风格按钮共6种不同的效果,它们以手绘涂鸦的方式,以不同的按钮边框线条宽度和虚线来构成按钮,效果非常不错. 使用方法 HTML结构 ...

CSS3实现8种Loading效果【第二波】

CSS3实现8种Loading效果【第二波】相关推荐

最新文章

热门文章