MENU

『Sakura主题美化#02』Sakura主题首页波浪动画效果

March 21, 2021 • Read: 388 • 默认分类

本文转载自千玖夜&复现Mashiro大佬博客首页的波浪动画效果


使用 CSS3 Animation 复现

直接扒 JS 代码固然省时省力……【省嘛?好像没有吧,当初扒的时候眼睛都快瞎了】,但是 JS 似乎不是每次都起作用……

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

CSS代码要么放到后台主题设置-自定义CSS样式里
要么就关闭CDN中的本地调用主题 js、css 文件选项,放在主题目录下的Style.css

CSS 如下:

#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://tandongtao.com/usr/uploads/2021/03/wave_1.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://tandongtao.com/usr/uploads/2021/03/wave_2.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

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

- - - The END - - -
  • 文章作者:谭先生
  • 版权所有:文章转载时,注明出处即可!
  • 本站部分资源收集于网络,纯个人收藏,无商业用途,如有侵权请及时告知!
  • Last Modified: August 4, 2021
    Archives QR Code Tip
    QR Code for this page
    Tipping QR Code
    阅读:388