首先全站引入jquery

我用的是百度公共jquery库地址

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js "></script>

样式1

1.jpg

1.jpg

在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; z-index:1000; 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; z-index:1000; 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); } }

在主题内的「页首(header.php)」文件的<body>后添加显示代码

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

在「页尾(footer.php)」内的前添加下列代码

<script> jQuery(window).load(function() { jQuery("#circle").fadeOut(500); jQuery("#circle1").fadeOut(700); }); </script>

样式2

QQ截图20160826132838.jpg

QQ截图20160826132838.jpg

在style.CSS添加代码

#loading { position: fixed !important; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 999; background: #000; opacity: 0.7; filter: alpha(opacity=70); font-size: 14px; line-height: 20px } #loading-one { color: #fff; position: absolute; top: 50%; left: 50%; margin: 50px 0 0 -80px; padding: 3px 10px } .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: -25px; -moz-animation: spinPulse 1s infinite ease-in-out; -webkit-animation: spinPulse 1s infinite linear; position: absolute; top: 50%; left: 50% } .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: -15px; position: relative; top: -50px; -moz-animation: spinoffPulse 1s infinite linear; -webkit-animation: spinoffPulse 1s infinite linear; position: absolute; top: 50%; left: 50% } @-moz-keyframes spinPulse { 0% { -moz-transform: rotate(160deg); opacity: 0; box-shadow: 0 0 1px #2187e7 } 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 #2187e7 } 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) } }

在主题内的「页首(header.php)」文件的<body>后添加显示代码

 <div id="loading"> <p id="loading-one">一日博客努力载入中...</p> <div class="circle"></div> <div class="circle1"></div> </div>

在「页尾(footer.php)」内的</body>前添加下列代码

<script> jQuery(function() { jQuery('#loading-one').empty().append('一日博客载入完成.').parent().fadeOut('slow'); jQuery('#loading').click(function() { jQuery('#loading').fadeOut('slow'); }); }); </script>

样式3

QQ截图20160901221237.jpg

QQ截图20160901221237.jpg

在style.CSS添加代码

#loading { position: fixed !important; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 999; background: #000; opacity: 0.7; filter: alpha(opacity=70); font-size: 14px; line-height: 20px } #loading-one { color: #fff; position: absolute; top: 50%; left: 50%; margin: 50px 0 0 -80px; padding: 3px 10px } .spinner { position: absolute; margin-right: 500px; top: 50%; left: 50%; width: 50px; height: 60px; margin: 0 0 0 -20px; font-size: 10px; } .spinner > div { background-color: #67CF22; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

在主题内的「页首(header.php)」文件的<body>后添加显示代码

<div id="loading"> <div id="loading-one"></div> <div class="spinner"> <div class="rect1"></div> <div class="rect2"></div> <div class="rect3"></div> <div class="rect4"></div> <div class="rect5"></div> </div> </div>

在「页尾(footer.php)」内的</body>前添加下列代码

<script> jQuery(window).load(function() { jQuery("#loading").fadeOut(500); }); </script>

代码实现

其实很简单,核心代码是最后一段的jQuery

jQuery("#loading").fadeOut(500);

表示加载完成后,0.5s 淡出这个效果。

文章来源

给WordPress添加「加载中」动画
如何在wordpress博客中添加炫酷的加载中动画特效
使用 CSS3 实现超炫的 Loading(加载)动画效果

最后修改:2019 年 02 月 26 日
喜欢我的文章吗?
别忘了点赞或赞赏,让我知道创作的路上有你陪伴。