Sakura这个博客主题算是心头的一个白月光了

从第一次造访2heng.xin，到现在已经大半年，但是即使到了今天，打开博客，第一屏跃入眼帘的时候，那种震撼感依然存在。

公开的主题Sakura和Mashiro主站有一些差别，比如说，没有这个很令我心水的波浪动画，哈哈。

自己动手，丰衣足食咯，然后我就开始尝试复刻，就有了今天这篇文章。

最初--Javascript照抄

说来惭愧，最初是直接把主页源码把那段JS代码直接抠了下来……

两片波浪图嵌在ID为Banner_wave_1/Banner_wave_2的两个DIV中。

具体CSS：

//不用复制这两段代码，后面有更完整的。
#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://cdn.qnight.ink/blogfile/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;
}
#banner_wave_2 {
    width: auto;
    height: 80px;
    background: url(https://cdn.qnight.ink/blogfile/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;
}

Js代码我……忘了保存了呜呜呜呜更新了新版本的Sakura没保存那段【反正我也用不上了】

好了本Part完。

使用CSS3 Animation复现

直接扒Js代码固然省时省力……【省嘛？好像没有吧，当初扒的时候眼睛都快瞎了】

但是Js似乎不是每次都起作用……

【好像现在打开Mashiro大佬的博客那两段波浪也不动了……】

然后我就自己用CSS3 Animation 重写这个动画。

CSS如下：

#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://cdn.qnight.ink/blogfile/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.qnight.ink/blogfile/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;
  }
}

波浪图片可以自己保存但是不要直接引用……叭，一分CDN流量一分钱啊TAT

图片是从Mashiro大佬的博客里扒出来的……看HEXO主题那边用上了（呜呜呜Hexo分支那边好多样式我其实更喜欢），想来这边应该也能用叭，ORZ如果不能用的话我一定立刻删除QAQ。

两个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')):?>
……