MorFans Dev
折腾 - 开发 - 分享

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

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

效果:

代码实现的效果:
2015071103071788
你也可以自己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文件的后同样添加下列代码

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

    

如需更改颜色,请自行编辑代码中的138,43,226#9a3ad1,颜色请看 [lhb href=’https://morfans.cn/rgb.html’]传送门[/lhb]

赞赏
魔帆博客,版权所有 | 如未注明,均为原创
本站均采用 BY-NC-ND 协议 (署名-非商业性使用-禁止演绎) 进行授权。
转载请注明来自本站文章:WordPress 特效-页面加载动画圆圈Duang~(https://www.morfans.cn/archives/400)

野小新

文章作者

野小新很野~

回复 Biebb技术博客 取消回复

textsms
account_circle
email

WordPress 特效-页面加载动画圆圈Duang~
效果: 代码实现的效果: 你也可以自己DIY,,比如 我博客现在的动画效果。 代码 首先我们需要把CSS样式表代码插入主题的Style.css样式表之中 /* 代码开始 morfans.cn 魔帆…
扫描二维码继续阅读
2015-08-25