<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery+CSS3页面内容加载效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<style>
.body, html {
background:#E7EDF1;
}
/* post, page titles */
.title {
font-family:'Source Sans Pro', arial, tahoma;
font-weight:300;
font-size:23px;
line-height:32px;
color:#44414C;
text-align:center;
display:block;
padding:0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-o-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
.title {
padding:0px 20px 37px 23px;
}
.entry-content {
font-family:'Source Sans Pro';
font-weight:300;
font-size:18px;
line-height:22px;
color:#818587;
text-align:left;
padding:25px 20px 35px 24px;
margin:30px auto;
background:#fff;
max-width:620px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.entry-content-toggle {
opacity:0 !important;
}
.entry-content p {
margin:0 0 20px 0;
padding:0;
}
.entry-content a {
color:#6E87BA;
text-decoration:underline;
}
.entry-content a:hover {
color:#E9826F;
text-decoration:none;
}
/* download button */
.download-button {
text-align:center;
margin-top:30px;
margin-bottom:30px;
}
.download-button a {
color:#fff;
padding:17px 32px 16px 32px;
display:inline-block;
font-family:'Montserrat', arial, tahoma;
font-weight:700;
font-size:12px;
text-transform:uppercase;
background-color:#13C9E7;
text-decoration:none;
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
}
.download-button a:hover {
color:#fff;
text-decoration:underline;
}
/* reload text link */
.reload {
font-family:'Source Sans Pro',arial,tahoma;
font-weight:400;
font-size:17px;
color:#9FA2A5;
margin:35px 0 40px 0;
cursor:pointer;
text-decoration:underline;
text-align:center;
width:100%;
}
</style>
<body>
<!-- BEGIN SCRIPTS + CSS -->
<!-- BEGIN CALL JQUERY -->
<script src="js/jquery.js" type="text/javascript"></script>
<!-- END CALL JQUERY -->
<!-- BEGIN CALL JS -->
<script src="js/pageloader.js" type="text/javascript"></script>
<!-- END CALL JS -->
<!-- BEGIN CALL CSS -->
<link rel="stylesheet" id="pageloader-css" href="css/pageloader.css" type="text/css" media="all" />
<!-- END CALL CSS -->
<!-- END SCRIPTS + CSS -->
<!-- BEGIN THE LOADING SCREEN -->
<div id="bonfire-pageloader">
<!-- BEGIN THE ICON -->
<div class="bonfire-pageloader-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="loading-12-icon" d="M291,82.219c0,16.568-13.432,30-30,30s-30-13.432-30-30s13.432-30,30-30S291,65.65,291,82.219z
M261,404.781c-15.188,0-27.5,12.312-27.5,27.5s12.312,27.5,27.5,27.5s27.5-12.312,27.5-27.5S276.188,404.781,261,404.781z
M361.504,113.167c-4.142,7.173-13.314,9.631-20.487,5.489c-7.173-4.141-9.631-13.313-5.49-20.487
c4.142-7.173,13.314-9.631,20.488-5.489C363.188,96.821,365.645,105.994,361.504,113.167z M188.484,382.851
c-14.348-8.284-32.697-3.368-40.98,10.98c-8.285,14.349-3.367,32.696,10.98,40.981c14.35,8.283,32.697,3.367,40.98-10.981
C207.75,409.482,202.834,391.135,188.484,382.851z M421.33,184.888c-8.368,4.831-19.07,1.965-23.901-6.404
c-4.832-8.368-1.965-19.07,6.404-23.902c8.368-4.831,19.069-1.964,23.9,6.405C432.566,169.354,429.699,180.056,421.33,184.888z
M135.399,329.767c-8.285-14.35-26.633-19.266-40.982-10.982c-14.348,8.285-19.264,26.633-10.979,40.982
c8.284,14.348,26.632,19.264,40.981,10.98C138.767,362.462,143.683,344.114,135.399,329.767z M436.031,277.249
c-11.044,0-20-8.953-20-19.999c0-11.045,8.955-20.001,20.001-20.001c11.044,0,19.999,8.955,19.999,20.002
C456.031,268.295,447.078,277.249,436.031,277.249z M115.97,257.251c-0.001-16.57-13.433-30.001-30.001-30.002
c-16.568,0.001-29.999,13.432-30,30.002c0.001,16.566,13.433,29.998,30.001,30C102.538,287.249,115.969,273.817,115.97,257.251z
M401.333,364.248c-10.759-6.212-14.446-19.97-8.234-30.73c6.212-10.759,19.971-14.446,30.731-8.233
c10.759,6.211,14.445,19.971,8.232,30.73C425.852,366.774,412.094,370.46,401.333,364.248z M135.398,184.736
c8.285-14.352,3.368-32.698-10.98-40.983c-14.349-8.283-32.695-3.367-40.981,10.982c-8.282,14.348-3.366,32.696,10.981,40.981
C108.768,204,127.115,199.082,135.398,184.736z M326.869,421.328c-6.902-11.953-2.807-27.242,9.148-34.145
s27.243-2.806,34.146,9.149c6.902,11.954,2.806,27.243-9.15,34.145C349.059,437.381,333.771,433.284,326.869,421.328z
M188.482,131.649c14.352-8.286,19.266-26.633,10.982-40.982c-8.285-14.348-26.631-19.264-40.982-10.98
c-14.346,8.285-19.264,26.633-10.98,40.982C155.787,135.017,174.137,139.932,188.482,131.649z"/>
</svg>
</div>
<!-- END THE ICON -->
<!-- BEGIN PLACE LOADING ICON IN THE MIDDLE OF THE PAGE -->
<script>
jQuery(window).resize(function(){
resizenow();
});
function resizenow() {
var browserwidth = jQuery(window).width();
var browserheight = jQuery(window).height();
jQuery('.bonfire-pageloader-icon').css('right', ((browserwidth - jQuery(".bonfire-pageloader-icon").width())/2)).css('top', ((browserheight - jQuery(".bonfire-pageloader-icon").height())/2));
};
resizenow();
</script>
<!-- END PLACE LOADING ICON IN THE MIDDLE OF THE PAGE -->
</div>
<!-- END THE LOADING SCREEN -->
<!-- BEGIN THE RELOAD LINK -->
<div class="reload" onClick="window.location.reload()">点击此处刷新页面..</div>
<!-- END THE RELOAD LINK -->
<!-- BEGIN TITLE + CONTENT -->
<div class="entry-content">
<!-- BEGIN TITLE -->
<h1 class="title">
<span style="font-size:40px;text-align:center;"><span style="font-weight:400;">PageLoader</span> website add-on</span><br /><span style="font-size:25px;color:#B1BDC6">A loading screen add-on with slide-in content</span>
</h1>
<!-- END TITLE -->
<!-- BEGIN CONTENT -->
<p>PageLoader is a tiny, <strong>customizable add-on</strong> that gives your site an animated loading screen. It also adds <strong>a nifty slide-in animation</strong> to all your content; as the loading screen fades away, your content slides down in an <strong>unobtrusive yet memorable</strong> way.</p>
<p>It’s a great and lightweight way to <strong>add spice to any site</strong>. Simply insert some code (clear instructions included) and your site will instantly boast a little extra pizazz! :) Optionally, you can <strong>color customize the loading screen as well as the icon</strong>, and give them both any color you choose.</p>
<p>And, <strong>it works everywhere</strong>. It’s been tested on desktop browsers along with a variety of iOS, Android and Windows devices.</p>
<p>To purchase the add-on, click the button below:</p>
<!-- BEGIN CONTENT -->
<!-- BEGIN DOWNLOAD BUTTON -->
<div class="download-button">
<a href="http://www.srcfans.com">Download on CodeCanyon</a>
</div>
<!-- END DOWNLOAD BUTTON -->
</div>
</body>
</html>
jQuery+CSS3页面内容加载效果.zip （4个子文件） 
css 
pageloader.css 2KB
index.html 7KB js jquery.js 91KB pageloader.js 2KB资源评论
MeJarry2017-09-27还可以了，学习学习
MNXYPRO
- 粉丝: 9
- 资源: 58
