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

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

2022-09-26 383
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 前端必学的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波浪效果，谢谢观看，如果觉得对您有帮助的话，可否给博主一个小小的赞和关注~

文章标签：
前端开发
关键词：
前端css
CSS前端
前端css3
CSS演示
言程序
目录
相关文章
小徐在进步
|
1月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性：继承性、层叠性和优先级，并深入讲解了背景图的相关属性，包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中，继承性指子元素自动继承父元素的文字控制属性；层叠性指相同属性后定义覆盖前定义，不同属性可叠加；优先级涉及选择器权重，包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
小徐在进步
240 91
六卿
|
21天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性，以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
六卿
17 3
前端基础(五)_CSS文本文字属性、背景颜色属性
六卿
|
21天前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性：层叠性、继承性和优先级，并通过实例演示了样式冲突、叠加和选择器优先级的应用。
六卿
17 2
前端基础(九)_CSS的三大特征
有路有乔-六月
|
6天前
|
前端开发 容器
前端技术分享：利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享：利用CSS Grid布局实现响应式设计
有路有乔-六月
22 3
G0518
|
6天前
|
前端开发 UED 容器
前端技术分享：利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享：利用 CSS Grid 实现响应式布局
G0518
17 2
Hoshiᅟᅠ
|
9天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）3
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
12 1
Hoshiᅟᅠ
|
9天前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍（上篇）2
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
18 1
Hoshiᅟᅠ
|
9天前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍（上篇）1
【前端基础篇】CSS基础速通万字介绍（上篇）
Hoshiᅟᅠ
16 1
六卿
|
21天前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位，包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用，解释了它们各自的特点和使用场景。例如，em和rem单位与字体大小相关，百分比单位与父元素的尺寸相关，而vw和vh单位则与浏览器视窗的宽度和高度相关。
六卿
16 1
六卿
|
21天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS（层叠样式表）的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用，展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS，讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外，还强调了使用`!important`规则时的优先级高于行内样式。
六卿
54 1