• 作者:SuperPaxxs扶摇直上九万里,绝云气,负青天,不知图哪了,正在努力搜索中..
    • 请在Chrome、Firefox等现代浏览器浏览本站。 有事 点击这里 联系博主
    • 想在魔帆博客投稿? 点击这里 联系博主
    • [ 既然来了就多看两篇文章嘛,你好意思走么? ]
    • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏魔帆博客吧

WordPress 特效-页面加载动画圆圈Duang~

目录
[隐藏]

效果:

代码实现的效果:
WordPress 特效-页面加载动画圆圈Duang~
你也可以自己DIY,,比如 我博客现在的动画效果。

代码

首先我们需要把CSS样式表代码插入主题的Style.css样式表之中

    /* 代码开始 morfans.cn 魔帆博客 */ 
    #circle {   
        background-color: rgba(0,0,0,0);   
        border:5px solid rgba(138,43,226,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 #9a3ad1;   
        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(138,43,226,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 #9a3ad1;    
        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文件的后同样添加下列代码

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

最后添加jQuery渐隐效果,在全站底部脚本footer.php内的 前添加下列代码

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

如需更改颜色,请自行编辑代码中的138,43,226#9a3ad1,颜色请看 传送门


魔帆博客 , 版权所有丨如未注明 , 均为原创丨本网站均采用BY-NC-SA协议进行授权 , 转载请注明WordPress 特效-页面加载动画圆圈Duang~
喜欢 (10)
[]
分享 (0)
Super Paxxs
关于作者:
一只初中狗,对网站建设和编程非常感兴趣。
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 你这博客被你修改的,,都不成样子了
    Biebb技术博客2016-11-27 21:24 回复
  2. 请问代码插在那个位置啊
    gan2016-06-12 08:34 回复
  3. The post have resolved my problem,thank you very much and hope you writting more good articles.
    ugg australia classic short dylyn boots2015-12-11 16:18 回复
  4. This post have resolved my problem,thanks very much and hope you writting more good articles.
    navy blue ugg boots on sale2015-12-10 00:16 回复
  5. 看不懂
    1额啊2015-08-26 17:03 回复
×
订阅图标按钮