纯CSS实现WordPress底部增加水波动画效果

虫子君
虫子君
虫子君
660
文章
278
评论
2019年12月9日23:28:25 1 1,617 2990字阅读9分58秒

网站美化这个事情似乎是一个没有尽头的事情,就像虫子君现在的网站一样,虽然现在我已经觉得非常的漂亮了,但还是觉得有时候哪里缺少一点什么,似乎网站美化这个这个事情,就仿佛这一辈子都没完没了一样的。

嗯哼,今天在逛博客的时候,发现一个好看的功能,纯粹使用CSS实现的动态效果,虽然图片部分有点取巧,但是得益于svg格式的图片的小尺寸,所以相比于代码实现也相差不大的。

测试环境
网站程序主题时间
WordPress 5.3中文版柒比贰知更鸟主题2019年12月9号

但是这个美化的效果确适合所有的WordPress主题,或者其他程序的主题。

说说为什么哈,其中重要的一环元素部分,使用的是svg的图片,对于现在而言,几乎所有的浏览器都已经支持了svg图片的支持,所以也不用当心,即便是那小部分无法正常显示的用户,也不会有太坏的影响,毕竟使用旧设备的用户,也不会看博客。

代码的核心部分,就是三张svg的图片然后配合css的animation属性,来促成动画的效果。虫子君个人觉得这个流服务区的站长,真的是聪明绝顶啊。这个办法都被他想到了,不错,不错。

纯CSS实现WordPress底部增加水波动画效果

看看图片的最底部,是不是非常的漂亮!

不过也有不足的地方,就是毕竟是纯css执行的效果,所以在动画的过渡交界的地方,会有卡顿的效果。当然不注意看也看不出什么来的。

但是得益于这个效果几乎可以适用所有的网站啊,并且添加方法也方便。

在主题的footer文件当中,将下方的代码粘贴进去,最底部比较合适!

begin主题的安装相对比较方便一些,可以直接在主题的SEO信息当中,找到也叫第二行信息,切换成html编辑模式,然后将下方的代码粘贴进去,保存即可。

纯CSS实现WordPress底部增加水波动画效果

begin主题添加在也叫第二行信息当中

柒比贰主题也不算麻烦,春哥的主题分为sever主题和B2主题,两个主题的后台相差不大,不过目前虫子君只是在使用B2主题,所以本次的功能演示,使用的是B2主题,大家如果在sever主题操作的时候遇到问题欢迎到我的博客下方留言。

打开WordPress的后台以后,进入B2主题的常规设置——综合设置,页面末端有一个HTML的编辑窗口,将一下代码粘贴进去即可。

<div class="waveHorizontals mobile-hide">
<div id="waveHorizontal1" class="waveHorizontal"> 
</div> 
<div id="waveHorizontal2" class="waveHorizontal"> 
</div> 
<div id="waveHorizontal3" class="waveHorizontal">
</div>
</div>
以上的代码是HTML 代码,各位看到时候注意,粘贴在页面脚部!

下方则是css代码,理论上你可以添加在任何已经引用在你主题页面的css文件当中,不过鉴于许多新手同学未必知道css文件的使用方法,所以这里虫子君还是教大家简单一点的办法。

begin主题,将一下css代码,粘贴到外观——主题选项——定制风格——自定义样式,然后点击保存即可。纯CSS实现WordPress底部增加水波动画效果

B2主题则相对麻烦一点, 毕竟目前的b2主题正处于一个上升阶段,春哥正在努力的赶代码,所以部分功能可能不是那么的完善。打开主题编辑“子主题”在style.css文件当中,将以下代码粘贴进去保存即可。

又或者,打开外观——自定义——额外的css,然后将以下代码粘贴进去也是可以的。

纯CSS实现WordPress底部增加水波动画效果

.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当中有几个图片的链接,这些个图片需要你上传到你的媒体库当中,如果您使用的是begin主题,上传的图片会自动更改默认的文件名,然后不一定支持svg格式的图片上传,所以推荐采用FTP模式上传。

如果您的主题是支持svg格式的图片上传的话,记得注意看一下图片上传以后,是否会修改图片的文件名,如果已经修改记得修改css当中的图片名称和路径

图片这里虫子君已经打包上传到网站当中了,大家留言刷新一下即可下载。

下载信息 资源名称:美化样式的图片 应用平台:不限 文件大小:小于1KB
下载地址:登录可见
继续阅读
  • 欢迎来“给我投稿”网友会因为你的帮助而感激。
  • 文章链接:https://chonzi.com/8549.html
B2主题菜单设置教程 WordPress教程

B2主题菜单设置教程

B2主题是春哥呕心沥血的一款作品,根据作者所说为了B2主题能够实现前端静态代码输出,利于seo工作量是成倍的增加。对于这么辛苦的付出自然是会有所回报的,所以现在春哥的主题价格是越卖越贵,并且买的人是越...
纯代码实现知更鸟begin主题弹窗公告 WordPress功能扩展

纯代码实现知更鸟begin主题弹窗公告

begin主题自己使用的时间长了以后,大部分知更鸟原有的主题功能已经完全可以满足自己的实际需求,对于新的功能并没有过高的需求,所以更新主题都没什么动力。今天在逛博客的时候发现有个站长做了一个begin...
大潮咖 B2 主题WordPress界功能最屌的主题 CMS资讯主题

大潮咖 B2 主题WordPress界功能最屌的主题

B2 这个主题是今年发布的一款可以说是轻社交的主题,其拥有非常出色的社交交互功能,不但支持QQ互联原生登录,并且支持微信原生登录以及微博原生登录等等国内三家主流的社会化登录平台,再...
柒比贰sever主题右侧悬浮菜单美化 WordPress教程

柒比贰sever主题右侧悬浮菜单美化

今天在网上查找教程的时候,偶然的机会看到一篇关于柒比贰主题的美化教程,然后虫子君看了一下代码,发现不错,是群友的,果断的转载过来了。 对于主题的美化这个事情,似乎一直都在进行中,所以虫子君拿着这些代码...
美化知更鸟begin主题的插入文章模块更绚丽 WordPress教程

美化知更鸟begin主题的插入文章模块更绚丽

各种各样的美化,各种各样的要求,一千个人就有一千种神奇的想法,所以对于主题的美化虫子君也从来没有满足过。今天在叶忠文的博客当中浏览的时候发现一个不错的效果。就是当使用begin主题在文章内页当中插入文...

您必须才能发表评论!

评论:1   其中:访客  1   博主  0
    • 飘锟 飘锟 1

      这个美化样式真的很不错,审美观强迫症的可以试试