前言

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

CSS3波浪效果

这是使用 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>

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;}
}

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>

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;}
}

总结

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

前端必学的CSS3波浪效果演示相关推荐

web前端必学功法之一：轮播图
web前端必学功法之一:轮播图效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
前端必学 - 大文件上传如何实现
前端必学 - 大文件上传如何实现写在前面问题分析开始操作一.文件如何切片二.得到原文件的hash值三.文件上传四.文件合并技术点总结[重要] 一.上传文件? 二.显示进度三.暂停上传 ...
web前端必学功法之一：用户选择爱好
web前端必学功法之一:用户选择爱好案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
web前端必学功法之一：留言板
web前端必学功法之一:留言板案例效果: css部分 <style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: ...
web前端必学功法之一：五星好评
web前端必学功法之一:五星好评案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
web前端必学功法之一：省市联动
web前端必学功法之一:省市联动案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
web前端必学功法之一：秒表实现
web前端必学功法之一:秒表实现功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...

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

目录

前言