源码分享

如何在网站左下角加上“圈圈加载”特效，各种颜色

：2015-8-15 ：大资源外挂网： Js、css代码

这个特效叫“圆圈加载”，需要加载jQuery。首先我们在header.php中引入jQuery库<script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.min.js">\x3C/script>')</script>这里我使用的是百度cdn的1.7.2版本的jQuery库，其他jQuery库：谷歌：<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>新浪：<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>微软：<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>又拍云：<script type="text/javascript" src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.7.2.min.js"></script>然后在footer.php</body>标签前加上：<div id="circle"></div><div id="circletext"></div><div id="circle1"></div>和<script type="text/javascript">jQuery(document).ready(function(){$("#circletext").text("加载肿");$(window).load(function() {$("#circle").fadeOut(400);$("#circle1").fadeOut(600);$("#circletext").text("完成鸟").fadeOut(800);});});</script>也可以将上面这段js直接写入您的js文件里。最后在style.css里加入：/* 圆圈加载*/#circle{background-color:rgba(0,0,0,0);border:5px solid rgba(10,10,10,0.9);opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #808080;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}#circle1{background-color:rgba(0,0,0,0);border:6px solid rgba(20,20,20,0.9);opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #202020;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}#circletext{width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}@-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}@-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}...

QQ相关	15篇
QQ技术	357篇
QQ资讯	650篇
游戏辅助	32篇
QQ飞车	71篇
穿越火线	823篇
英雄联盟	123篇
手游辅助	22篇
绝地吃鸡	237篇
逆战	47篇
和平精英	49篇
APEX英雄	10篇
地下城与勇士	10篇
游戏资讯	31篇
其他游戏	122篇
精品软件	6篇
系统相关	138篇
QQ相关	262篇
其他软件	264篇
手机应用	239篇
源码分享	2篇
网站源码	107篇
空间背景皮肤	10篇
易语言源码	66篇
易语言模块	6篇
空间开场动画	6篇
QQ头像源码	5篇
网站logo源码	7篇
Js、css代码	9篇
其他PSD源码	25篇
视频福利	71篇
公开技术	7篇
网盘公开	11篇
其他公开	18篇

搜索

最新文章

热门文章

分类