看到别人的加载特效,简直叼渣天啊,立马搜索了下,这不陌小雨给大家带来了:
1、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; 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(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 35px #2187e7; 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、js
<code><div id="circle"></div> <div id="circle1" ></div></code> <script type="text/javascript"> $(window).load(function() { $("#circle").fadeOut(500); $("#circle1").fadeOut(700); }); </script>
去看看陌小雨首页的左下角吧,是不是酷毙了!
你可能对这些文章感兴趣:
- WordPress网站利用body_class()实现多种布局
- 博客文章底部的随机语言是怎么实现的?
- WordPress插件推荐:xiu主题开启ajax和全站无刷新音乐的办法
- xiu主题手机端显示侧边栏
- xiu主题的手机端和非手机端广告位后台设置是如何实现的?
- 给xiu主题添加一个浮动小人
- 分享适合xiu主题的多说评论样式
- xiu主题修改社交字符
- xiu主题给评论添加签到按钮
- xiu主题添加vip等级评论样式
- xiu主题文章版权申明优化
- 分享陌小雨博客导航外链跳转样式及xiu主题评论用户名外链修改办法
- xiu主题仿dux主题搜索弹出框,让百度站内搜索和wordpress自带搜索共存。
- 美化xiu主题Blockquote样式
如有疑问,请前往问答中心反馈!
反馈