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

喜欢本文章还请去原作者博客里浏览留言,在此再次感谢 千玖夜 大佬!

1.使用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。

2.两个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插在这。-->
注意*这是一则由 Google AdSense 自动推荐的广告,不代表本站立场

寒蝉黎明之时,便是重生之日。