🌼

文章封面来自哆啦小熙 - < ， >

之前玩Hexo的时候就很喜欢Sakura主题首页的波浪效果，切换到Halo后发现没有了，emm得想办法整出来

简单浏览了一下源码，样式文件里旧得css应该还是有得，div可能是因为bug被作者大大删除了，先自己加回来吧

关于css样式我尝试过使用现有源码里旧得样式，有问题没有生效，最后换成自定义css

修改完之后波浪效果PC看起来还不错，移动端波浪滚动效果稍慢了点 😅

增加自定义CSS

在Sakura主题设置 > 基本设置 > 自定义css样式 中加入如下css样式（下图中 transition-property 拼写错误 2022年7月10日 偶然检查发现 已经修复

这里css样式使用类选择器 不要使用id选择器 会造成404页面动画加载失败的bug

.banner_wave_lk1 {
    width: auto;
    height: 65px;
    background: url(https://image.lkarrie.com/images/2022/02/13/wave_1.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: 5;
    opacity: 1;
    transition-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_lk2 {
    width: auto;
    height: 80px;
    background: url(https://image.lkarrie.com/images/2022/02/13/wave_2.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: 0;
    z-index: 4;
    opacity: 1;
    transition-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;
}
@keyframes move1 {
    100% {
        background-position: 100% 0;
    }
}
@keyframes move2 {
    100% {
        background-position: -100% 0;
    }
}

增加DIV

主题编辑 > layouts > imgbox.ftl 增加div

<div class="banner_wave_lk1"></div><div class="banner_wave_lk2"></div>

Q.E.D.