本文最后更新于2022年5月1日,已超过 30 天没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
有什么想要的,直接去 Mashiro 大佬哪里扒走 XD!
首先,在自定义CSS 或者 style.css 文件中添加下面CSS
/*波浪CSS*/
#banner_wave_1 {
width: auto;
height: 65px;
background: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.5.1/img/Sakura/images/wave1.png) repeat-x;
_filter: alpha(opacity=80);
position: absolute;
bottom: 0;
width: 400%;
left: -236px;
z-index: 5;
opacity: 1;
transiton-property: opacity,bottom;
transition-duration: .4s,.4s;
animation-name: move2;
animation-duration: 240s;
animation-fill-mode: backwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#banner_wave_2 {
width: auto;
height: 80px;
background: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.5.1/img/Sakura/images/wave2.png) repeat-x;
_filter: alpha(opacity=80);
position: absolute;
bottom: 0;
width: 400%;
left: 0;
z-index: 4;
opacity: 1;
transiton-property: opacity, bottom;
transition-duration: .4s, .4s;
animation-name: move2;
animation-duration: 160s;
animation-fill-mode: backwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* move1和move2只是方向不同,根据喜好自选即可。 */
/* 没做浏览器适配,具体哪些浏览器会生效未知,反正Chrome没什么问题。*/
@keyframes move1 {
100% {
background-position: 100% 0;
}
}
@keyframes move2 {
100% {
background-position: -100% 0;
}
}
上面波浪的图片是 Mashiro 大佬放在jsd的,建议自己下载下面的图片包放在自己服务器或者oss引用。
在路径 /wp-content/themes/Sakura/layouts下,打开 imgbox.php。在
<figure id="centerbg" class="centerbg">
上面插入下面代码
<style>.header-info::before{display: none !important;opacity: 0 !important;}</style>
<div id="banner_wave_1"></div><div id="banner_wave_2"></div><!--两个DIV插在这。-->

图片包 下载: wave.rar (cbbkk.com)