本文作者:花雾影

wordpress美化主题页面底部滚动波浪动画特效

花雾影1年前 ( 2019-11-02 )50112抢沙发
wordpress美化主题页面底部滚动波浪动画特效摘要: 今天为大家分享在网站底部加入波浪动画的特效,效果请看(https://www.chinablogger.cn博客)底部动画。以seven主题为例子(当前主题美化版本为柒比贰主题的2...

c1832c0cf8b7750abb9f2027554fad29.jpg wordpress美化主题页面底部滚动波浪动画特效 wordpress主题 主题美化 wptheme 第1张

今天为大家分享在网站底部加入波浪动画特效,效果请看(https://www.chinablogger.cn博客)底部动画。以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>

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

.waveHorizontals { width: 100%; height: 25px; position: relative; overflow: hidden; z-index: 1; background-color: #fafaff !important; } #waveHorizontal1 { -webkit-mask: url(/wp-content/themes/child/img/hh_footer_bl01.svg); mask: url(/wp-content/themes/child/img/hh_footer_bl01.svg); animation-delay: -2s; animation-duration: 12s; } #waveHorizontal1,#waveHorizontal2,#waveHorizontal3 { background-color: #4997fd!important; } .waveHorizontal { width: 200%; height: 100%; display: block; position: absolute; left: 0; bottom: 0; background-repeat: repeat-x; background-position: left bottom; background-size: 350px 100%; transform-origin: 0 100% 0; animation-name: move; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes move { 0% { transform: translate(-175px,0px) scale(1,1) } 50% { transform: translate(-87px,0px) scale(1,0.5) } 100% { transform: translate(0px,0px) scale(1,1) } } #waveHorizontal2 { -Webkit-mask: url(/wp-content/themes/child/img/hh_footer_bl02.svg); mask: url(/wp-content/themes/child/img/hh_footer_bl02.svg); animation-delay: -2s; animation-duration: 5s; } #waveHorizontal3 { -Webkit-mask: url(/wp-content/themes/child/img/hh_footer_bl03.svg); mask: url(/wp-content/themes/child/img/hh_footer_bl03.svg); animation-delay: -1s; animation-duration: 3s; }

然后解释一下css里面#waveHorizontal1、#waveHorizontal2、#waveHorizontal3这里面的地址替换成自己的地址;我的是直接放到子主题的img文件夹中的.


隐藏内容
登录账户注册账户

登录后查看内容

文章投稿或转载声明

来源:WEB交流版权归原作者所有,转载请保留出处。本站文章发布于 1年前 ( 2019-11-02 )
温馨提示:文章内容系作者个人观点,不代表水泊网对其观点赞同或支持。

赞(

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,50112人围观)参与讨论

还没有评论,来说两句吧...