文章数量
36
访客量
4952
访问量
9817

css特效之底部波浪动画

阅读量:1085
更新时间:2023-01-20 01:03:18

效果预览:效果预览
源码下载:关注公众号【RMRF】,回复【css2】可获取源码

一、HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wave</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="wave">
        <div class="wave-item wave1"></div>
        <div class="wave-item wave2"></div>
        <div class="wave-item wave3"></div>
    </div>
</body>
</html>

二、CSS样式

* {
    padding: 0px;
    margin: 0px;
}

.wave {
    position: fixed;
    bottom: 0px;
    height: 110px;
    width: 100%;
    overflow: hidden;
    background: repeating-linear-gradient(to bottom, #fff, #90cef1);
}

.wave .wave-item {
    position: absolute;
    width: 200%;
    height: 100%;
    background-size: 50% 100%;
    opacity: 0.4;
}

.wave .wave1 {
    top: 20px;
    left: -100%;
    opacity: 0.2;
    background: url(../images/wave1.png);
    animation: to-right 15s infinite linear;
}

.wave .wave2 {
    top: 30px;
    left: 0;
    opacity: 0.3;
    background: url(../images/wave2.png);
    animation: to-left 25s infinite linear;
}

.wave .wave3 {
    top: 45px;
    left: -100%;
    opacity: 0.2;
    background: url(../images/wave3.png);
    animation: to-right 35s infinite linear;
}

@keyframes to-right {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1);
    }

    50% {
        transform: translateX(25%) translateZ(0) scaleY(0.7);
    }

    100% {
        transform: translateX(50%) translateZ(0) scaleY(1);
    }
}

@keyframes to-left {
    from {
        transform: translate(0%, 0px);
    }

    to {
        transform: translate(-50%, 0px);
    }
}