CSS3 波浪简单模拟--我是波浪，我有起伏，有大波与小波（坏笑中...）

我是波浪，我有起伏，我有大波与小波（坏笑中...）

　　最近改版网站，一般也不会去写动画，但是有些网站还是需要的，故拿出一个较简单的动画出来分享，很简单很简单。

 

原理简单阐述

　　其实很简单，使用一张美工做好了的2400px宽度的3个不同起伏的波浪，然后自己合成为一张【精灵图片】（有助于一起加速加载和同时加载）

有了素材就好办了，使用一个容器把3个div背景的波浪堆在一起，然后使用css3的偏移进行移动，当然左右和上下都要，然后慢慢调整为一个适合的时间和延迟。

 

废话不多说，先上演示地址：http://sandbox.runjs.cn/show/akodn0vt

 

波浪动画CSS
复制代码
<style type="text/css">
        /*
 *  author: jasnature
 *  email : 276227015@qq.com
 *  last update : 2016-04-21
 * */
        .index_waves {
            background: url("img/index_waves.png  这里放波浪图，图可以去演示地址抠出来") center 0 no-repeat;
        }
        
        .wave3 {
            height: 427px;
            width: 2402px;
            background-position: 0 0;
        }
        
        .wave2 {
            height: 427px;
            width: 2402px;
            background-position: 0 -427px;
        }
        
        .wave1 {
            height: 427px;
            width: 2402px;
            background-position: 0 -854px;
        }
        
        @keyframes wave {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(-80px, 30px);
            }
            100% {
                transform: translate(160px, -60px);
            }
        }
        
        @-webkit-keyframes wave {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(-80px, 30px);
            }
            100% {
                transform: translate(160px, -60px);
            }
        }
        
        @-moz-keyframes wave {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(-80px, 30px);
            }
            100% {
                transform: translate(160px, -60px);
            }
        }
        
        .waves {
            position: absolute;
            bottom: -135px;
            height: 527px;
            width: 100%;
            overflow: hidden;
        }
        
        .waves > div {
            position: absolute;
            left: -180px;
            bottom: 0;
        }
        
        .waves .wave1,
        .waves .wave2,
        .waves .wave3 {
            animation: wave 5s ease-in-out alternate infinite;
        }
        
        .waves .wave2 {
            animation-delay: 0.6s;
        }
        
        .waves .wave3 {
            animation-delay: 1.2s;
        }
        
        .waveContent {
            position: relative;
            background-color: #219df3;
            height: 500px;
        }
        
        h2 {
            position: relative;
            display: block;
            color: #fff;
            font-size: 48px;
            font-family: "microsoft yahei";
            font-weight: normal;
            width: 1100px;
            margin: 0 auto;
            top: 180px;
            z-index: 99;
        }
    </style>
复制代码

 

波浪动画HTML

 

复制代码
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>我是波浪，我有起伏，我有大波与小波（坏笑中...）</title>
    </head>

    

    <body>
        <div class="waveContent">
            <h2>我是波浪，我有起伏，我有大波与小波（坏笑中...）</h2>
            <div class="waves">
                <div class="index_waves wave1">

                </div>
                <div class="index_waves wave2">

                </div>
                <div class="index_waves wave3">

                </div>
            </div>
        </div>

    </body>

</html>
复制代码

 

 

好咯，代码附送完毕。

 

posted @   JasNature  阅读(2003)  评论(3)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· [AI/GPT/综述] AI Agent的设计模式综述
历史上的今天：
2011-04-21 c# 不常用逻辑运算符
2011-04-21 .NET 开发相关使用工具和框架(较旧2011年前)
点击右上角即可分享
微信分享提示
AI IDE Trae