以下是 30款css3页面加载等待动画特效css代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>30款css3页面加载等待动画特效</title>
<link href="_css/Icomoon/style.css" rel="stylesheet" type="text/css" />
<link href="_css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="_scripts/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="_scripts/main.js"></script>
</head>
<body>
<div id="wrapper">
<div id="wrapper-center">
<div class="wrapper-center-title">Square Animations</div>
<div class="wrapper-center-content">
<a href="demo1.html">Demo 1</a>
<a href="demo2.html">Demo 2</a>
<a href="demo3.html">Demo 3</a>
<a href="demo4.html">Demo 4</a>
<a href="demo5.html">Demo 5</a>
<a href="demo6.html">Demo 6</a>
<a href="demo7.html">Demo 7</a>
<a href="demo8.html">Demo 8</a>
<a href="demo9.html">Demo 9</a>
<a href="demo10.html">Demo 10</a>
</div>
<div class="wrapper-center-title">Round Animations</div>
<div class="wrapper-center-content">
<a href="demo11.html">Demo 11</a>
<a href="demo12.html">Demo 12</a>
<a href="demo13.html">Demo 13</a>
<a href="demo14.html">Demo 14</a>
<a href="demo15.html">Demo 15</a>
<a href="demo16.html">Demo 16</a>
<a href="demo17.html">Demo 17</a>
<a href="demo18.html">Demo 18</a>
<a href="demo19.html">Demo 19</a>
<a href="demo20.html">Demo 20</a>
</div>
<div class="wrapper-center-title">Various Animations</div>
<div class="wrapper-center-content">
<a href="demo21.html">Demo 21</a>
<a href="demo22.html">Demo 22</a>
<a href="demo23.html">Demo 23</a>
<a href="demo24.html">Demo 24</a>
<a href="demo25.html">Demo 25</a>
<a href="demo26.html">Demo 26</a>
<a href="demo27.html">Demo 27</a>
<a href="demo28.html">Demo 28</a>
<a href="demo29.html">Demo 29</a>
<a href="demo30.html">Demo 30</a>
</div>
</div>
</div>
</body>
</html>
JS代码(main.js):
$(window).load(function(){
//$("#loading").delay(2000).fadeOut(500);
$("#loading-center").click(function(){
$("#loading").fadeOut(500);
}
)}
)CSS代码(main.css):
body{margin:0px;padding:0px;font-family:'Source Sans Pro',sans-serif;background-color:#c3ccd5;overflow:hidden;}
#header{background-color:#3f8dbf;float:left;width:100%;height:50px;color:rgba(255,255,255,1);line-height:50px;}
#header a{color:rgba(255,255,255,1);text-decoration:none;display:block;font-size:15px;}
#header-left{float:left;height:50px;}
#header-left:hover #header-left-icon{background-color:#3F8DBF;}
#header-left:hover #header-left-text{background-color:#599BC8;}
#header-left-icon{float:left;height:50px;width:50px;text-align:center;background-color:#35759F;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
#header-left-icon i{line-height:50px;font-size:20px;}
#header-left-text{float:left;height:50px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
#header-left-text a{padding-left:20px;padding-right:20px;}
#header-right{float:right;height:50px;}
#header-right:hover #header-right-icon{background-color:#3F8DBF;}
#header-right:hover #header-right-text{background-color:#599BC8;}
#header-right-icon{float:right;height:50px;width:50px;text-align:center;background-color:#35759F;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;font-size:18px;line-height:50px;}
#header-right-icon i{font-size:20px;line-height:50px;}
#header-right-text{float:right;height:50px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;}
#header-right-text a{padding-right:20px;padding-left:20px;}
#wrapper{float:left;width:100%;margin-top:100px;margin-bottom:100px;}
#wrapper-center{width:1100px;margin-right:auto;margin-left:auto;}
.wrapper-center-title{float:left;width:100%;font-size:18px;}
.wrapper-center-content{float:left;width:100%;margin-top:25px;margin-bottom:80px;}
.wrapper-center-content a{float:left;padding-right:20px;padding-left:20px;background-color:#3F8DBF;display:block;line-height:30px;color:#FFFFFF;text-decoration:none;font-size:14px;-webkit-transition:background 0.5s;-moz-transition:background 0.5s;-o-transition:background 0.5s;transition:background 0.5s;margin-right:20px;margin-top:20px;}
.wrapper-center-content a:hover{background-color:#262932;}
分享到QQ
分享到微博
微信扫一扫
