纯css写底部波浪动画


觉得自己网站底部少些什么就可以把这个加上,纯css写的底部动画(前端美化组件系列

效果图:
底部波浪效果图

源代码

css代码

/* 底部波浪 */
.waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #fff !important
}

.ripro-dark .waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #181616 !important
}

#waveHorizontal1 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    animation-delay: -2s;
    animation-duration: 12s;
}

#waveHorizontal1,
#waveHorizontal2,
#waveHorizontal3 {
    background-image: linear-gradient(20deg, #fde300 0, #ffd001 100%) !important;
}

.ripro-dark #waveHorizontal1 {
    background-color: #f1f1f1 !important;
}

.ripro-dark #waveHorizontal2 {
    background-color: #f1f1f1 !important;
}

.ripro-dark #waveHorizontal3 {
    background-color: #f1f1f1 !important;
}

.waveHorizontal {
    width: 200%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 350px 100%;
    transform-origin: 0 100% 0;
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {
        transform: translate(-175px, 0px) scale(1, 1)
    }

    50% {
        transform: translate(-87px, 0px) scale(1, 0.5)
    }

    100% {
        transform: translate(0px, 0px) scale(1, 1)
    }
}

#waveHorizontal2 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    animation-delay: -2s;
    animation-duration: 5s;
}

#waveHorizontal3 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    animation-delay: -1s;
    animation-duration: 3s;

html代码

/* 底部波浪 */
.waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #fff !important
}

.ripro-dark .waveHorizontals {
    width: 100%;
    height: 20px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #181616 !important
}

#waveHorizontal1 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_001.svg);
    animation-delay: -2s;
    animation-duration: 12s;
}

#waveHorizontal1,
#waveHorizontal2,
#waveHorizontal3 {
    background-image: linear-gradient(20deg, #fde300 0, #ffd001 100%) !important;
}

.ripro-dark #waveHorizontal1 {
    background-color: #f1f1f1 !important;
}

.ripro-dark #waveHorizontal2 {
    background-color: #f1f1f1 !important;
}

.ripro-dark #waveHorizontal3 {
    background-color: #f1f1f1 !important;
}

.waveHorizontal {
    width: 200%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 350px 100%;
    transform-origin: 0 100% 0;
    animation-name: move;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes move {
    0% {
        transform: translate(-175px, 0px) scale(1, 1)
    }

    50% {
        transform: translate(-87px, 0px) scale(1, 0.5)
    }

    100% {
        transform: translate(0px, 0px) scale(1, 1)
    }
}

#waveHorizontal2 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_002.svg);
    animation-delay: -2s;
    animation-duration: 5s;
}

#waveHorizontal3 {
    -webkit-mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    mask: url(https://img.srcdict.com/SRCDICT/svg/srcdict_003.svg);
    animation-delay: -1s;
    animation-duration: 3s;

Github地址

声明:文生技术博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 纯css写底部波浪动画


做个俗人,贪财好色。