使用 CSS3 Animation 复现

直接扒 JavaScript 代码虽然省时省力……【不过，省了吗？当初复制时眼睛都快瞎了】。然而，JavaScript 似乎并不是每次都能起作用……

因此，我决定用 CSS3 Animation 来重写这个动画。以下是相关的 CSS 代码：

#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://img.meituan.net/video/05c0c65a76a237b80f596ef8179c47116794.png) repeat-x;
    filter: alpha(opacity=80); /* 修正为 filter */
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 5;
    opacity: 1;
    transition-property: opacity, bottom; /* 修正为 transition */
    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://img.meituan.net/video/5ea57cfbe5920d9b099beccb74962ffb6647.png) repeat-x;
    filter: alpha(opacity=80); /* 修正为 filter */
    position: absolute;
    bottom: 0;
    width: 400%;
    left: 0;
    z-index: 4;
    opacity: 1;
    transition-property: opacity, bottom; /* 修正为 transition */
    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;
    }
}

插入两个 DIV 的位置

在路径 /wp-content/themes/Sakura/layouts 下，找到并打开 imgbox.php 文件。请在以下位置插入代码：

……
<style>.header-info::before{display: none !important; opacity: 0 !important;}</style>
<div id="banner_wave_1"></div><div id="banner_wave_2"></div> <!-- 在这里插入两个 DIV -->
<figure id="centerbg" class="centerbg">
<?php if ( !akina_option('focus_infos') ){ ?>
    <div class="focusinfo">
        <?php if (akina_option('focus_logo')):?>
……