Sakura波浪动画效果

发布于 2022-02-24  449 次阅读

本文最后更新于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)

赏