纯CSS3怎么实现波浪效果代码展示

PHP中文网

2023-03-11 帮助30人

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   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  
							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="https://www.swvq.com/css-tutorial-493309.html#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
						<use xlink:href="https://www.swvq.com/css-tutorial-493309.html#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
						<use xlink:href="https://www.swvq.com/css-tutorial-493309.html#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
						<use xlink:href="https://www.swvq.com/css-tutorial-493309.html#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>
<head>
<meta charset="utf-8" />
<title>简单的CSS3波浪效果演示_dowebok</title>
<link rel="stylesheet" href="https://www.swvq.com/style.css" />
</head>
<body>
<div>
<div class="inner-header flex">
<h1>简单的 CSS3 波浪效果</h1>
</div>

<div>
<svg 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  
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>
<use xlink:href="https://www.swvq.com/css-tutorial-493309.html#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
<use xlink:href="https://www.swvq.com/css-tutorial-493309.html#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
<use xlink:href="https://www.swvq.com/css-tutorial-493309.html#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
<use xlink:href="https://www.swvq.com/css-tutorial-493309.html#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怎么实现波浪效果代码展示

style.css文件

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐