zoukankan      html  css  js  c++  java
  • jq loading 动画插件

    jq loading 动画插件,基于Jq,bootstrap 的loading,我这里也是网站上下载的插件,个人认为比较好看的一个demo,

    注意,jq 插件必须是2.0 以上的版本,自己可以去官网下载 https://jquery.com/download/

    html

    <div id="loading">
    		<div id="loading-center">
    			<div id="loading-center-absolute">
    				<div class="object" id="object_one"></div>
    				<div class="object" id="object_two"></div>
    				<div class="object" id="object_three"></div>
    			</div>
    		</div>
    	</div>
    

    css,最主要靠css 来实现动画的

    <style>
    	#loading{
    		background-color: white	;
    		height: 100%;
    		 100%;
    		position: fixed;
    		z-index: 1;
    		margin-top: 0px;
    		top: 0px;
    	}
    	#loading-center{
    		 100%;
    		height: 100%;
    		position: relative;
    	}
    	#loading-center-absolute {
    		position: absolute;
    		left: 50%;
    		top: 50%;
    		height: 150px;
    		 150px;
    		margin-top: -75px;
    		margin-left: -75px;
    	}
    	.object{
    		 20px;
    		height: 20px;
    		background-color: #f53e6a;
    		float: left;
    		margin-right: 20px;
    		margin-top: 65px;
    		-moz-border-radius: 50% 50% 50% 50%;
    		-webkit-border-radius: 50% 50% 50% 50%;
    		border-radius: 50% 50% 50% 50%;
    	}
    
    	#object_one {	
    		-webkit-animation: object_one 1.5s infinite;
    		animation: object_one 1.5s infinite;
    		}
    	#object_two {
    		-webkit-animation: object_two 1.5s infinite;
    		animation: object_two 1.5s infinite;
    		-webkit-animation-delay: 0.25s; 
    	    animation-delay: 0.25s;
    		}
    	#object_three {
    	    -webkit-animation: object_three 1.5s infinite;
    		animation: object_three 1.5s infinite;
    		-webkit-animation-delay: 0.5s;
    	    animation-delay: 0.5s;	
    		}
    	@-webkit-keyframes object_one {
    	75% { -webkit-transform: scale(0); }
    	}
    	@keyframes object_one {
    
    	  75% { 
    	    transform: scale(0);
    	    -webkit-transform: scale(0);
    	  }
    	}
    	@-webkit-keyframes object_two {
    	  75% { -webkit-transform: scale(0); }
    	}
    	@keyframes object_two {
    	  75% { 
    	    transform: scale(0);
    	    -webkit-transform:  scale(0);
    	  }
    	}
    	@-webkit-keyframes object_three {
    
    	  75% { -webkit-transform: scale(0); }
    	}
    	@keyframes object_three {
    
    	  75% { 
    	    transform: scale(0);
    	    -webkit-transform: scale(0);
    	  } 
    	}
    	</style>
    

    js 调用,在公共地方中写入loading,每个页面进入的时候都会出现改loading

    $(window).load(function() {
    	//$("#loading").delay(2000).fadeOut(500);
    	$("#loading-center").click(function() {
    	$("#loading").fadeOut(500);
    	})
    })
    

    效果 这里只是png 的图片,效果,可吧代码复制运行即可

  • 相关阅读:
    php中获取各种路径
    大型网站系统架构演化之路
    404、500、502等HTTP状态码介绍
    Linux 查看进程和删除进程
    mysql中FIND_IN_SET的使用方法
    PHP导出Excel 数字末尾变0或小数点解决办法
    PHP API接口测试小工具
    要慎用mysql的enum字段的原因
    mysql 导入&导出sql文件
    Linux下php安装memcache扩展
  • 原文地址:https://www.cnblogs.com/wangliko/p/13306450.html
Copyright © 2011-2022 走看看