这是一个非常帅的加载状态,可在网站页面加载时显示,加载后淡出。
蓝色小圈加载样式
1. 将 CSS 样式表代码插入 Style.css 主题文件中
#circle { background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top: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:30px; height:30px; margin:0 auto; -moz-animation:spin .5s infinite linear; -webkit-animation:spin .5s infinite linear; -o-animation:spin .5s infinite linear; -ms-animation:spin .5s infinite linear; position:fixed; left:20px; bottom:20px; } #circle1 { background-color: rgba(0,0,0,0); border:5px solid rgba(0,183,229,0.9); opacity:.9; border-top:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #2187e7; width:10px; height:10px; margin:0 auto; position:fixed; left:30px; bottom:30px; -moz-animation:spinoff .5s infinite linear; -webkit-animation:spinoff .5s infinite linear; -o-animation:spinoff .5s infinite linear; -ms-animation:spinoff .5s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); } } @-moz-keyframes spinoff { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(-360deg); } } @-webkit-keyframes spin { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); } } @-webkit-keyframes spinoff { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(-360deg); } } @-o-keyframes spin { 0% { -o-transform:rotate(0deg); } 100% { -o-transform:rotate(360deg); } } @-o-keyframes spinoff { 0% { -o-transform:rotate(0deg); } 100% { -o-transform:rotate(-360deg); } } @-ms-keyframes spin { 0% { -ms-transform:rotate(0deg); } 100% { -ms-transform:rotate(360deg); } } @-ms-keyframes spinoff { 0% { -ms-transform:rotate(0deg); } 100% { -ms-transform:rotate(-360deg); } }
2. 在 header.php 中加入
<div id="circle"></div> <div id="circle1" ></div>
3. 在 footer.php 中加入
<script type="text/javascript"> $(window).load(function() { $("#circle").fadeOut(500); $("#circle1").fadeOut(700); }); </script>
注:可别忘了加载 jQuery 库哦!
黑 / 蓝色大圈加载样式
1. 将 CSS 样式表代码插入 Style.css 主题文件中(若需实现蓝色大圈效果,请自行修改以下代码,蓝白色应该搭配 rgba(0,183,229) 与 #2187e7)
#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); } }
2. 在 header.php 中加入
<div id="circle"></div> <div id="circle1" ></div>
3. 在 footer.php 中加入
<script type="text/javascript"> $(window).load(function() { $("#circle").fadeOut(500); $("#circle1").fadeOut(700); }); </script>
这么好的东东竟然没人顶?沙个发,赶紧去试试。
@螳螂虾 去试试吧~
@螳螂虾 哈哈,我说我是在哪看到的,原来是在这里看到的,记错了~
大哥,如何让只他显示在还没加载完的地方,想你的那要,不要显示在旁边。
@静鹰 哦哦没加载完的地方吗?直接启用simple lazyload插件,然后把插件里面的loading.gif替换掉就好
@WP酷 还要安装插件?
@静鹰 你用的插件,在文章说的不是不用插件吗?
@静鹰 两个不是一种性质,本篇文章说的是在页面加载时显示一个圆圈状加载状态;我的那个是在图片加载时显示圆圈状加载状态
@WP酷 哦,模板了。
@静鹰 明白了
@静鹰 你的加载特效是用插件实现的吗?