AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

前端必学的CSS3波浪效果演示

2022-09-26 424
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端必学的CSS3波浪效果演示

 目录

文章目录

前言

CSS3波浪效果

1.Html构建

2.CSS编写

3.完整代码

index.html文件

style.css文件

总结

前言

       随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css3动画,这里作者给大家分享一个前端开发必掌握的一个CSS3波浪效果，赶紧学起来吧，加在自己开发网页的底部，给页面增加一点活泼的气息~

CSS3波浪效果

       image.gif编辑

       这是使用 SVG 和 CSS 动画制作的波浪效果，上半部分是蓝色（可修改成其他颜色）渐变的背景颜色，下半部分就是波浪，有四条波浪在不停的来回起伏，非常逼真。该波浪效果可用于大部分页面的底部，使页面增加一点活泼的气息。。

1.Html构建

代码如下（示例）：

<div class="inner_header"> 填充蓝色（可修改成其他颜色）渐变的背景颜色

<div class="waves">这部分就是波浪的svg，有四条波浪在不停的来回起伏，效果非常逼真

<div class="header">
      <div class="inner-header flex">
        <h1>简单的 CSS3 波浪效果</h1>
      </div>
      <div>
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
          <defs>
            <path id="gentle-wave"
              d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
          </g>
        </svg>
      </div>
    </div>

image.gif

2.CSS编写

代码如下（示例）：

这里通过CSS3的animation动画属性来控制四条线条在不停的来回起伏，形成波浪效果

.header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
/*  background: #FFAFBD;  
  background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  
  background: linear-gradient(to right, #ffc3a0, #FFAFBD); 
 */
    color: white;
}
.inner-header {
    height: 65vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}
.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
}
.content a {
    margin: 0 5px;
    font-size: 12px;
    color: #333;
}
.content a:hover {
    color: #000;
}
/* Animation */
.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
    .content {
        height: 30vh;
    }
    h1 {
        font-size: 24px;
    }
}

image.gif

3.完整代码

index.html文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>简单的CSS3波浪效果演示_dowebok</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="header">
      <div class="inner-header flex">
        <h1>简单的 CSS3 波浪效果</h1>
      </div>
      <div>
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
          <defs>
            <path id="gentle-wave"
              d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
          </g>
        </svg>
      </div>
    </div>
  </body>
</html>

image.gif

style.css文件

body {
    margin: 0;
}
h1 {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
    font-size: 48px;
}
p {
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
    font-size: 14px;
    color: #333333;
}
.header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
/*  background: #FFAFBD;  
  background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  
  background: linear-gradient(to right, #ffc3a0, #FFAFBD); 
 */
    color: white;
}
.logo {
    width: 50px;
    fill: white;
    padding-right: 15px;
    display: inline-block;
    vertical-align: middle;
}
.inner-header {
    height: 65vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
.flex {
    /*Flexbox for containers*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}
.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
}
.content a {
    margin: 0 5px;
    font-size: 12px;
    color: #333;
}
.content a:hover {
    color: #000;
}
/* Animation */
.parallax > use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
    .content {
        height: 30vh;
    }
    h1 {
        font-size: 24px;
    }
}

image.gif

总结

       以上就是今天要讲的内容啦，给大家分享了一个css3波浪效果，谢谢观看，如果觉得对您有帮助的话，可否给博主一个小小的赞和关注~

文章标签：
前端开发
关键词：
前端css3
前端css
CSS前端
CSS演示
言程序
目录
相关文章
土木林森
|
9天前
|
Web App开发 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用CSS3，打造炫酷视觉效果！
【10月更文挑战第31天】前端开发面临复杂布局的挑战，本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求，而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局，帮助开发者构建高性能、用户友好的网页应用。
土木林森
19 4
邹荣乐
|
28天前
|
前端开发 JavaScript
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
邹荣乐
133 1
六卿
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
六卿
30 3
前端基础(五)_CSS文本文字属性、背景颜色属性
六卿
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性：层叠性、继承性和优先级，并通过实例演示了样式冲突、叠加和选择器优先级的应用。
六卿
27 2
前端基础(九)_CSS的三大特征
有路有乔-六月
|
1月前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
48 3
G0518
|
1月前
|
前端开发 UED 容器
前端技术分享：利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享：利用 CSS Grid 实现响应式布局
G0518
50 2
Hoshiᅟᅠ
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）3
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
16 1
Hoshiᅟᅠ
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）2
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
23 1
Hoshiᅟᅠ
|
1月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍（上篇）1
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
18 1
六卿
|
2月前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位，包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用，解释了它们各自的特点和使用场景。例如，em和rem单位与字体大小相关，百分比单位与父元素的尺寸相关，而vw和vh单位则与浏览器视窗的宽度和高度相关。
六卿
25 1

热门文章

最新文章

  • 1
    Css基本样式————字体
  • 2
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    纯CSS3实现宽屏二级下拉菜单
  • 6
    CSS伪元素实现的3D按钮
  • 7
    CSS3实现时间轴效果
  • 8
    05.javascript访问CSS
  • 9
    如何用纯 CSS 创作一个赛车 loader
  • 10
    CSS3中的选择器
  • 1
    告别‘老司机’时代，AJAX与Fetch API让你的前端与Python后端无缝对接！
    59
  • 2
    现代前端开发中的响应式设计原则与实践
    89
  • 3
    现代前端开发中的响应式设计实践与优化
    60
  • 4
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 5
    前端项目部署问题总结
    61
  • 6
    前端框架与库 - React生命周期与Hooks
    48
  • 7
    前端性能优化都有那些方案 ？
    71
  • 8
    高级前端常见的面试题？
    99
  • 9
    前端框架与库 - React基础：组件、Props、State
    70
  • 10
    技术心得：前端点击按钮，导入excel文件，上传到后台，excel接收和更新数据
    49

    • 相关课程

    更多
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • WebGL 在前端可视化中的实践
  • 基于Web前端的可用性优化
  • 基于webpack和npm的前端组件化实践

    • 相关实验场景

    更多
  • 前端开发基础1：前端开发环境的安装和配置
  • CSS基础教程
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    阿里云OSS设置跨域访问