loading动画特效小结
更新时间:2017年1月26日 10:00 点击:1409
话不多说,请看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lodading动画效果上</title> <link rel="stylesheet" href="style.css"/> <style> .box{ width: 100%; padding:3%; box-sizing: border-box; overflow: hidden; } .box .loader{ width: 30%; float: left; height: 200px; margin-right: 3%; border:1px #ccc solid; box-sizing: border-box; display: flex; align-content: center; justify-content: center; position: relative; } .box .loading { position: absolute; top: 50px; } @-webkit-keyframes loading-1{ 0%{ transform: rotate(0deg); } 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } .demo-1 .loading{ width: 35px; height: 35px; position: relative; } .demo-1 .loading i{ display: block; width: 100%; height: 100%; border-radius:50%; background: linear-gradient(transparent 0%, transparent 70%, #333 30% ,#333 100%); -webkit-animation: loading-1 .6s linear 0s infinite; } @-webkit-keyframes loading-2{ 0%{ transform: scaleY(1); } 50%{ transform: scaleY(0.4); } 100%{ transform: scaleY(1); } } .demo-2 .loading i{ display: inline-block; width: 4px; height: 35px; border-radius: 2px; margin:0 2px; background-color: #333; } .demo-2 .loading i:nth-child(1){ -webkit-animation:loading-2 1s ease-in .1s infinite; } .demo-2 .loading i:nth-child(2){ -webkit-animation:loading-2 1s ease-in .2s infinite; } .demo-2 .loading i:nth-child(3){ -webkit-animation:loading-2 1s ease-in .3s infinite; } .demo-2 .loading i:nth-child(4){ -webkit-animation:loading-2 1s ease-in .4s infinite; } .demo-2 .loading i:nth-child(5){ -webkit-animation:loading-2 1s ease-in .5s infinite; } .demo-3 .loading{ position: relative; } .demo-3 .loading i{ display: block; width: 15px; height: 15px; border-radius: 50%; background-color: #333; position: absolute; } .demo-3 .loading i:nth-child(1){ top: 25px; left: 0; -webkit-animation:loading-3 1s ease 0s infinite; } .demo-3 .loading i:nth-child(2){ top: 17px; left: 17px; -webkit-animation:loading-3 1s ease -0.12s infinite; } .demo-3 .loading i:nth-child(3){ top: 0px; left: 25px; -webkit-animation:loading-3 1s ease -0.24s infinite; } .demo-3 .loading i:nth-child(4){ top: -17px; left: 17px; -webkit-animation:loading-3 1s ease -0.36s infinite; } .demo-3 .loading i:nth-child(5){ top: -25px; left: 0; -webkit-animation:loading-3 1s ease -0.48s infinite; } .demo-3 .loading i:nth-child(6){ top: -17px; left: -17px; -webkit-animation:loading-3 1s ease -0.6s infinite; } .demo-3 .loading i:nth-child(7){ top: 0px; left: -25px; -webkit-animation:loading-3 1s ease -0.72s infinite; } .demo-3 .loading i:nth-child(8){ top: 17px; left: -17px; -webkit-animation:loading-3 1s ease -0.84s infinite; } @-webkit-keyframes loading-3{ 50%{ transform: scale(0.4); opacity: .3 } 100%{ transform: scale(1); opacity: 1 } } @-webkit-keyframes loading-4{ 0%{ transform: scale(0); opacity: 0; } 1%{ opacity: 1; } 100%{ transform: scale(1); opacity: 0; } } .demo-4 .loading i:nth-child(1){ -webkit-animation:loading-4 1s linear 0s infinite; } .demo-4 .loading i:nth-child(2){ -webkit-animation:loading-4 1s linear 0.2s infinite; } .demo-4 .loading i:nth-child(3){ -webkit-animation:loading-4 1s linear 0.4s infinite; } .demo-4 .loading{ width: 60px; height: 60px; position: relative; } .demo-4 .loading i{ display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #333; position: absolute; left: 0; top: 0; opacity: 0; } .demo-5 .loading{ width: 40px; height: 40px; position: relative; } .demo-5 .loading i{ display: block; border:2px solid #333; border-color: transparent #333; border-radius: 50%; position: absolute; } .demo-5 .loading i:first-child{ width: 35px; height: 35px; top:0px; left: 0px; -webkit-animation:loading-5 1s ease-in-out 0s infinite; } .demo-5 .loading i:last-child{ width: 15px; height: 15px; top:10px; left: 10px; -webkit-animation:loading-5 1s ease-in-out 0.5s infinite reverse; } @-webkit-keyframes loading-5{ 0%{ transform: rotate(0deg) scale(1); } 50%{ transform: rotate(180deg) scale(0.6); } 100%{ transform: rotate(360deg) scale(1); } } .demo-6 .loading{ width: 80px; height: 20px; position: relative; } .demo-6 .loading i{ display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin-right: 10px; position: absolute; } @-webkit-keyframes loading-6{ 0%{ left: 100px; top: 0; } 80%{ left: 0; top: 0; } 85%{ left: 0; top: -20px; width: 20px; height: 20px; } 90%{ width: 40px; height: 20px; } 95%{ left: 100px; top: -20px; width: 20px; height: 20px; } 100%{ left: 100px; top: 0; } } .demo-6 .loading i:nth-child(1){ -webkit-animation:loading-6 2s linear 0s infinite; } .demo-6 .loading i:nth-child(2){ -webkit-animation:loading-6 2s linear -0.4s infinite; } .demo-6 .loading i:nth-child(3){ -webkit-animation:loading-6 2s linear -0.8s infinite; } .demo-6 .loading i:nth-child(4){ -webkit-animation:loading-6 2s linear -1.2s infinite; } .demo-6 .loading i:nth-child(5){ -webkit-animation:loading-6 2s linear -1.6s infinite; } .demo-7 .loading i { background-color: #777; border-radius: 2px; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; position: absolute; width: 5px; height: 15px; } .demo-7 .loading-1 { top: 20px; left: 0; -webkit-animation: loading 1.2s 0.12s infinite ease-in-out; -moz-animation: loading 1.2s 0.12s infinite ease-in-out; -ms-animation: loading 1.2s 0.12s infinite ease-in-out; -o-animation: loading 1.2s 0.12s infinite ease-in-out; animation: loading 1.2s 0.12s infinite ease-in-out; } .demo-7 .loading-2 { top: 13.63636px; left: 13.63636px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: loading 1.2s 0.24s infinite ease-in-out; -moz-animation: loading 1.2s 0.24s infinite ease-in-out; -ms-animation: loading 1.2s 0.24s infinite ease-in-out; -o-animation: loading 1.2s 0.24s infinite ease-in-out; animation: loading 1.2s 0.24s infinite ease-in-out; } .demo-7 .loading-3 { top: 0; left: 20px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: loading 1.2s 0.36s infinite ease-in-out; -moz-animation: loading 1.2s 0.36s infinite ease-in-out; -ms-animation: loading 1.2s 0.36s infinite ease-in-out; -o-animation: loading 1.2s 0.36s infinite ease-in-out; animation: loading 1.2s 0.36s infinite ease-in-out; } .demo-7 .loading-4 { top: -13.63636px; left: 13.63636px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: loading 1.2s 0.48s infinite ease-in-out; -moz-animation: loading 1.2s 0.48s infinite ease-in-out; -ms-animation: loading 1.2s 0.48s infinite ease-in-out; -o-animation: loading 1.2s 0.48s infinite ease-in-out; animation: loading 1.2s 0.48s infinite ease-in-out; } .demo-7 .loading-5 { top: -20px; left: 0; -webkit-animation: loading 1.2s 0.6s infinite ease-in-out; -moz-animation: loading 1.2s 0.6s infinite ease-in-out; -ms-animation: loading 1.2s 0.6s infinite ease-in-out; -o-animation: loading 1.2s 0.6s infinite ease-in-out; animation: loading 1.2s 0.6s infinite ease-in-out; } .demo-7 .loading-6 { top: -13.63636px; left: -13.63636px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: loading 1.2s 0.72s infinite ease-in-out; -moz-animation: loading 1.2s 0.72s infinite ease-in-out; -ms-animation: loading 1.2s 0.72s infinite ease-in-out; -o-animation: loading 1.2s 0.72s infinite ease-in-out; animation: loading 1.2s 0.72s infinite ease-in-out; } .demo-7 .loading-7 { top: 0; left: -20px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-animation: loading 1.2s 0.84s infinite ease-in-out; -moz-animation: loading 1.2s 0.84s infinite ease-in-out; -ms-animation: loading 1.2s 0.84s infinite ease-in-out; -o-animation: loading 1.2s 0.84s infinite ease-in-out; animation: loading 1.2s 0.84s infinite ease-in-out; } .demo-7 .loading-8 { top: 13.63636px; left: -13.63636px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-animation: loading 1.2s 0.96s infinite ease-in-out; -moz-animation: loading 1.2s 0.96s infinite ease-in-out; -ms-animation: loading 1.2s 0.96s infinite ease-in-out; -o-animation: loading 1.2s 0.96s infinite ease-in-out; animation: loading 1.2s 0.96s infinite ease-in-out; } @-webkit-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @-moz-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @-ms-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @-o-keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } @keyframes loading { 50% { opacity: 0.3; } 100% { opacity: 1; } } </style> </head> <body> <div class="box"> <div class="loader demo-1"> <div class="loading"> <i></i> </div> </div> <div class="loader demo-2"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-3"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-4"> <div class="loading"> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-5"> <div class="loading"> <i></i> <i></i> </div> </div> <div class="loader demo-6"> <div class="loading"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> <div class="loader demo-7"> <div class="loading"> <i class="loading-1"></i> <i class="loading-2"></i> <i class="loading-3"></i> <i class="loading-4"></i> <i class="loading-5"></i> <i class="loading-6"></i> <i class="loading-7"></i> <i class="loading-8"></i> </div> </div> </div> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
- 本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画。分享给大家供大家参考,具体如下:这里介绍的jQuery彩带效果网页加载条动画,我觉得挺有创意的,虽然难度不算大,但能想到用这样一个背景来做Loading加载条,也实...2015-10-30
- 这篇文章主要介绍了jQuery动画效果相关方法,结合实例形式较为详细的分析了jQuery实现动画效果所用到的常见方法与相关注意事项,需要的朋友可以参考下...2016-01-05
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
这篇文章主要介绍了jQuery实现的给图片点赞+1动画效果,并附带在线演示及demo源码下载,涉及jQuery鼠标事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下...2016-01-05jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
这篇文章主要介绍了jQuery实现的点赞随机数字显示动画效果,并附带在线演示与demo源码供读者下载.涉及jQuery鼠标事件响应及基于animate动画效果实现技巧,需要的朋友可以参考下...2016-01-05- AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有功能,其中一项主要的特性是Angular对动画的支持。下面通过本文给大家介绍AngularJS中实现显示或隐藏动画效果的方式总结,对angularjs动画效果相关知识感兴趣的朋友一起学习...2016-01-05
- 本文将为大家收集10个超赞的jQuery图片滑块动画,都是小编精挑细选而来,希望这些现成的jQuery插件将为你节省很多开发时间。...2016-01-26
- angularjs作为一个全ajax的框架,对于请求,如果页面上不做任何操作的话,在结果反回来之前,页面是没有任何响应的,不像普通的HTTP请求,会有进度条之类...2015-12-29
- 下面小编就为大家带来一篇通过jquery实现页面的动画效果(实例代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03
- 本文只是一个简单的演示程序,大家可以根据自己的需求进行修改,以达到自己想要实现的功能。...2016-03-30
- 这篇文章主要介绍了基于javascript实现页面加载loading效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-03-22
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
这篇文章主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下...2016-01-05- 这篇文章主要介绍了超炫酷的WPF实现Loading控件效果,感兴趣的小伙伴们可以参考一下...2020-06-25
- 在使用PDFObject.js时,由于后台需要转换数据,在前台显示的时候,有很长一段时间显示空白页面,所以想到写一个假的加载动画,下面看下实现代码...2016-12-02
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
看到这种百叶窗效果的动画,以为是用flash做的,下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果,需要的朋友参考下吧...2016-03-01- 要做一个异步登录,打算给用户做一点提示,所以就网上找了点代码,自己修改新增了一些,做了一个html+css+js的功能封装,供大家参考,需要的朋友参考下吧...2017-02-08
- 这篇文章主要给大家介绍了利用JS如何实现文字的聚合动画效果,实现的效果非常不错,类似粒子动画的效果,有需要的朋友可以参考借鉴,下面来一起看看吧。...2017-01-26
- 本文通过实例代码给大家介绍了C#实现简单的loading提示控件功能,代码非常简单,具有参考借鉴价值,需要的朋友参考下吧...2020-06-25
- 这篇文章主要介绍了如何利用CSS3在Angular中实现动画效果,对angular动画相关知识感兴趣的朋友一起学习吧...2016-01-18
- 在我们的平时的工作中,在前后端交互的时候,为了提高页面的观赏性和用户的体验,我们会在页面上添加loading来阻止用户操作来等待接口的返回,这篇文章主要给大家介绍了关于如何优雅的控制全局loading显示的相关资料,需要的朋友可以参考下...2022-01-10
- 本篇文章主要分享了javascript实现loading动画特效的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧...2017-01-26