博客首页波浪特效

波浪特效

给首页添加一个波浪的小特效

示例:

代码:

css代码:

/*  波浪动画  */
#banner_wave_1 {
    width: auto;
    height: 65px;
    background: url(https://cdn.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.3/wave/wave1.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: -236px;
    z-index: -1;
    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.jsdelivr.net/gh/Ukenn2112/UkennWeb@5.3/wave/wave2.png) repeat-x;
    _filter: alpha(opacity=80);
    position: absolute;
    bottom: 0;
    width: 400%;
    left: 0;
    z-index: -2;
    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;
}

@keyframes move1 {
    100%{
        background-position: 100% 0;
    }
}

@keyframes move2 {
    100%{
        background-position: -100% 0;
    }
}

html

<div id="banner_wave_1"></div>
<div id="banner_wave_2"></div>