给网站加上加载特效

给网站加上加载特效

文章目录[隐藏]

看下面截图的左下角

 

/*芒果源码—— 蓝色特效*/

#circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,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 #2187e7;
width:50px;
height:50px;
margin:0 auto;
position:fixed;
left:30px;
bottom:30px;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite ease-in-out;
-o-animation:spinPulse 1s infinite ease-in-out;
-ms-animation:spinPulse 1s infinite ease-in-out;}
#circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:fixed;
left:40px;
bottom:40px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
-o-animation:spinoffPulse 1s infinite linear;
-ms-animation:spinoffPulse 1s infinite linear;
}
@-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); }
}
/*芒果源码——黑色特效*/

#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:50px;
height:50px;
margin:0 auto;
position:fixed;
left:30px;
bottom:30px;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite ease-in-out;
-o-animation:spinPulse 1s infinite ease-in-out;
-ms-animation:spinPulse 1s infinite ease-in-out;}
#circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(20,20,20,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #202020;
width:30px;
height:30px;
margin:0 auto;
position:fixed;
left:40px;
bottom:40px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
-o-animation:spinoffPulse 1s infinite linear;
-ms-animation:spinoffPulse 1s infinite linear;
}
@-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); }
}

代码添加

在文章底部</footer>前加入

<div id="circle"></div> <div id="circle1" ></div>

在文章底部</footer>后加入

<script type="text/javascript">
$(window).load(function() {
$("#circle").fadeOut(500);
$("#circle1").fadeOut(700);
});
</script>


 

分享到 :

请务必线上支付,通过线下支付的出现任何问题平台均不担保!

相关推荐

ps 儿童cdr ai卡通可爱中文字体库宝贝涂鸦海报设计素材包下载mac

字体需要安装才能使用!需要解压后将字体复制到C:\Windows\Fonts安装好后...

Thinkphp掌上阅读小说源码 支持公众号、代理分站支付、APP打包

[wm_blue]此源码是转载的没有测试,现在免费分享给大家。大家使用的时候如果发现...

广告印刷服务网站响应式模板

广告印刷服务网站响应式模板一款创意的宣传纸打印服务/广告印刷设计公司网站HTML模板...

破壳内容社交电商

社交电商魅力一:自用返利!社交电商魅力二:分享赚钱!社交电商魅力三:终身绑定的利益分...

发表评论

登录... 后才能评论