首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

loading动画特效小结

Posted in Javascript onJanuary 22, 2017

话不多说，请看代码

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

loading动画特效小结

- Author -

756642763

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 获取函数形参个数
Jul 31 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
jquery+json实现分页效果
Mar 07 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
BootStrap入门教程(二)之固定的内置样式
Sep 19 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 #Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 #Javascript
JS实现点击表头表格自动排序（含数字、字符串、日期）
Jan 22 #Javascript
node.js基于mongodb的搜索分页示例
Jan 22 #Javascript
利用JS实现文字的聚合动画效果
Jan 22 #Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 #Javascript
jQuery实现的分页功能示例
Jan 22 #Javascript
条码(1) 二维码(2) 日志(1) 太阳码(1) openGauss(1) 延时任务(1) pdf(1) Eclipse(1) JDBC(3) Word(2)
You might like
在PHP中使用灵巧的体系结构
2006/10/09 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
详解PHP数据压缩、加解密(pack, unpack)
2016/12/17 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
本人自用的global.js库源码分享
2015/02/28 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python利用faker库批量生成测试数据
2020/10/15 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
加拿大购物频道：The Shopping Channel
2016/07/21 全球购物
GNC健安喜美国官网：美国第一营养品牌
2016/07/22 全球购物
美国用餐电影院：Alamo Drafthouse Cinema
2020/01/23 全球购物
个人作风建设剖析材料
2014/10/11 职场文书
银行贷款委托书范本
2014/10/11 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
党员理论学习心得体会
2016/01/21 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP