wordpress美化页面底部滚动波浪动画特效(demo为seven主题)

释放双眼,带上耳机,听听看~!
wordpress美化页面底部滚动波浪动画特效(demo为seven主题)

操作步骤

以seven主题为例子(当前主题美化版本为柒比贰主题的2.90版本),美化操作步骤如下:

  1. 找到seven主题下的footer.php文件,然后搜索</footer>,添加如下代码:
<div class="waveHorizontals mobile-hide"<div id="waveHorizontal1" class="waveHorizontal">
</div> <div id="waveHorizontal2" class="waveHorizontal">
</div> <div id="waveHorizontal3" class="waveHorizontal"></div></div>

把下面的css代码放到你的主题文件style.css或者子主题的style.css里面即可

.waveHorizontals {
    width100%;
    height25px;
    position: relative;
    overflow: hidden;
    z-index1;
    background-color#fafaff !important;
}
 
#waveHorizontal1 {
    -webkit-maskurl(/wp-content/themes/child/img/hh_footer_bl01.svg);
    maskurl(/wp-content/themes/child/img/hh_footer_bl01.svg);
    animation-delay: -2s;
    animation-duration12s;
}
 
#waveHorizontal1,#waveHorizontal2,#waveHorizontal3 {
    background-color#4997fd!important;
}
 
.waveHorizontal {
    width200%;
    height100%;
    display: block;
    position: absolute;
    left0;
    bottom0;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size350px 100%;
    transform-origin0 100% 0;
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
 
@keyframes move {
    0% {
        transformtranslate(-175px,0px) scale(1,1)
    }
 
    50% {
        transformtranslate(-87px,0px) scale(1,0.5)
    }
 
    100% {
        transformtranslate(0px,0px) scale(1,1)
    }
}
 
#waveHorizontal2 {
    -webkit-maskurl(/wp-content/themes/child/img/hh_footer_bl02.svg);
    maskurl(/wp-content/themes/child/img/hh_footer_bl02.svg);
    animation-delay: -2s;
    animation-duration5s;
}
 
#waveHorizontal3 {
    -webkit-maskurl(/wp-content/themes/child/img/hh_footer_bl03.svg);
    maskurl(/wp-content/themes/child/img/hh_footer_bl03.svg);
    animation-delay: -1s;
    animation-duration3s;
}

然后解释一下#waveHorizontal1、#waveHorizontal2、#waveHorizontal3这里面的地址替换成自己的地址;我的是直接放到子主题的img文件夹中的,三张图片注册登录即可下载!

关于下载地址我放到了下面的隐藏附件中,登录就可以下载了!

更多付费定制美化可以直接联系我!也可以到6服务区去逛逛!教程结束

图片下方下载具体效果观看本站底部

隐藏内容,您需要满足以下条件方可查看

人已赞赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧