首页
所有分类
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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
Javascript作用域和作用域链原理解析
Mar 03 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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
Flutter(2) 数据重复(1) sortInts(1) WebSockets(3) Pool(1) Apache(17) Tkinter(4) Hudi(1) feDisplacementMap(1) Navigator(1)
You might like
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
PHP简单实现生成txt文件到指定目录的方法
2016/04/25 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
2016/01/10 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
Node.js中你不可不精的Stream（流）
2018/06/08 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
SQLite3中文编码 Python的实现
2017/01/11 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
英国精品买手店：Browns Fashion
2016/09/29 全球购物
Amcal中文官网：澳洲综合性连锁药房
2019/03/28 全球购物
Muziker英国：中欧最大的音乐家商店
2020/02/05 全球购物
加拿大户外探险购物网站：SAIL
2020/06/27 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
大学新闻系应届生求职信
2014/06/02 职场文书
门面房租房协议书
2014/08/20 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
暑期实践个人总结
2015/03/06 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
文化大革命观后感
2015/06/17 职场文书
公司考勤管理制度
2015/08/04 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS