|
一个优秀的博客不仅仅要给读者得到想要的知识或内容，也应该给予读者阅读时的享受。因为有些朋友的网速很慢，而博客中的图片等内容挺多的，所以在网页打开时往往需要等半天，如果此时能够显示一个漂亮的入场动画，也许可以缓解等待网页打开的无奈感。今天就来分享一下周叔博客的加载动画特效。 特效的实现并不麻烦，充电宝什么牌子好简单来说就是用几个层来遮罩页面，然后在这个层之上添加一个GIF动画或者CSS动画，下面来分享一下具体代码： 1：首先要加载jQuery库，如果已经加载过jQuery，可以忽略此步骤，我用的wordpress自带的库，加载方法如下： php wp_enqueue_script('jquery'); ? 2：在head中加载css动画特效： style type="text/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:20pxloading-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{ -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px 2187e7 -moz-transform:rotate(145deg); opacity:1100%{ -moz-transform:rotate(-320deg); opacity:0@-moz-keyframes spinoffPulse{ -moz-transform:rotate(0deg)100%{ -moz-transform:rotate(360deg)@-webkit-keyframes spinPulse{ -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px 2187e7 -webkit-transform:rotate(145deg); opacity:1100%{ -webkit-transform:rotate(-320deg); opacity:0@-webkit-keyframes spinoffPulse{ -webkit-transform:rotate(0deg)100%{ -webkit-transform:rotate(360deg) /style 如果需要兼容IE，就需要添加gif动画做补充，代码如下： ps：地址需要修改成你的地址，附上我使用的图片，如果喜欢，请自行下载到本地。 !--[if IE] style type="text/css" loading{background:000 url(GIF图片地址) no-repeat center;} /style ![endif]-- 3：在head中加载JS控制代码： script type="text/javascript" jQuery(function(){ jQuery('loading-one').empty().append('周叔博客载入完成.').parent().fadeOut('slow'); jQuery('loading').click(function(){ jQuery('loading').fadeOut('slow'); /script 4：最后在body的顶部添加如下代码： div id="loading" p id="loading-one" 周叔移动电源博客载入中... /p div /div div /div /div 在这里我要强调一点，第4步的html代码最好用javascript封装输出，因为如果不用javascript输出，百度蜘蛛会将div标签内的文字抓取到快照中。如何通过javascript输出，大家可以直接查看我的博客源代码，非常简单的东西这里，就不再赘述了。另外，如果发现按照我的步骤不能实现特效，也请自行打开周叔博客的网页源码对比一下，可能是css在格式化的时候出了问题，因为在周叔博客CSS上是压缩过的，你可以自行复制一下。 【多图杀猫】拥有顶级三屏游戏机的屌丝 做充电宝都要学会看电路图 不知道移动电源你真的OUT了 考虑为博客建立移动电源品牌大全 移动电源多久不充电，电量会流失 充电宝什么牌子最好 http://wh.pconline.com.cn/343/3438580.html |
|
|
