前端必学的CSS3波浪效果演示_css3波浪形背景-程序员宅基地

技术标签: CSS从入门到精通  css  前端  html  css3  javascript  

目录

文章目录

前言

CSS3波浪效果

1.Html构建

2.CSS编写

3.完整代码

index.html文件

style.css文件

总结


前言

        随着前端技术的不断发展与进步,界面交互的样式要求和美感也越来越高,很多网页的交互都加上了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编写

代码如下(示例):

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



.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波浪效果,谢谢观看,如果觉得对您有帮助的话,可否给博主一个小小的赞和关注~

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_61243965/article/details/125268823

智能推荐

JavaScript(ES5)的六大数据类型_es5数据类型-程序员宅基地

文章浏览阅读958次。JavaScript提供了6中数据类型,其中4种基本数据类型用于处理数字和文字。**➢String 字符串类型:**字符串是用单引号或双引号来说明的(可以使用单引号来输入包含双引号的字符串,反之亦然),如:“The cow jumped over the moon.”数值数据类型: JavaScript 支持整数和浮点数。整数可以为正数、0或者负数;浮点数可以包含小数点,也可以包含一个“e”(..._es5数据类型

Java开发必须要会!java并发编程实战英文pdf_并发编程实战 英文-程序员宅基地

文章浏览阅读169次。阿里面试总结1.一面首先确认对阿里的意向度;其次面试官会针对你曾经做过的项目来做具体技术的交流,你对项目细节是不是掌握到位,以及java技术基础和原理掌握程序,比如并发编程以及数据库和JVM三个方面,也会交流到分布式、线程池的实现等等(重点考察有没有深入钻研技术和技术上的亮点);2.二面技术面,根据项目深入的了解技术实力,了解你的知识面、问题解决能力以及技术灵活运用能力,也通过这一过程考察团队合作能力、学习主动性和创新性,可以挑选2-3个做过的有典型性的项目做一个仔细技术回顾和自己独到的理解(这是加_并发编程实战 英文

蓝牙模块的特性_蓝牙板引脚的电压是多少伏-程序员宅基地

文章浏览阅读753次。本篇是关于蓝牙模块的特性介绍_蓝牙板引脚的电压是多少伏

Get-LocalGroup_get-localgroupca-程序员宅基地

文章浏览阅读252次。Get-LocalGroupModule:Microsoft.PowerShell.LocalAccountsGets the local security groups.SyntaxPowerShellCopyGet-LocalGroup [[-Name] <String[]>] [<CommonParameters>]PowerShellCopyGet-LocalGroup [[-SID] <SecurityIdenti_get-localgroupca

上传头像,相机相册文件转换为File文件_takephoto的tempimagepath怎么转成file-程序员宅基地

文章浏览阅读617次。 1,弹出dialog 相机按钮,相册按钮,//弹出dialog private void getDialog() { dialog = new Dialog(this); //填充对话框的布局 View inflate = LayoutInflater.from(this).inflate(R.layout.popup_wind..._takephoto的tempimagepath怎么转成file

微型计算机系统中常见硬件及功能,微型计算机系统的硬件包括哪五大组成部分?各部分的功能是什么?...-程序员宅基地

文章浏览阅读398次。满意答案jusck7654332013.03.15采纳率:49%等级:12已帮助:7315人硬件的系统包括控制器、运算器、储存设备、输入设备、输出设备五个部分。1. 运算器运算器是完成二进制编码的算术或逻辑运算的部件。运算器由累加器(用符号A表示)、通用寄存器(用符号B表示)和算术逻辑单元(用符号ALU表示)组成,其核心是算术逻辑单元。通用寄存器B用于暂存参加运算的一个操作数,此操作数来自..._jusck

随便推点

百练OJ:2714:求平均年龄_百练2714-程序员宅基地

文章浏览阅读1.5k次。百练OJ:2714:求平均年龄:班上有学生若干名,给出每名学生的年龄(整数),求班上所有学生的平均年龄,保留到小数点后两位。_百练2714

mnist 数据集 下载 训练 测试 pytorch_mnist 本地 pytorch training.pt-程序员宅基地

文章浏览阅读1.5k次,点赞3次,收藏3次。1、下载可以使用#train_set = mnist.MNIST('./data', train=True, download=True)但是速度慢一般无法下载,官网下载也较慢提供官网下载的压缩包https://download.csdn.net/download/KID___/12727172使用方法└── MNIST ├── processed │├── test.pt │└── training.pt └── raw ..._mnist 本地 pytorch training.pt

华为鸿蒙系统初探之HUAWEI DevEco Studio Hello World_华为deveco studio配置教程-程序员宅基地

文章浏览阅读5.2w次,点赞147次,收藏453次。2020年9月10日,华为鸿蒙系统升级至华为鸿蒙系统2.0版本.本文探索一下其推出的IDE_华为deveco studio配置教程

如何在Linux终端下查看当前操作系统版本及系统信息-程序员宅基地

文章浏览阅读290次。最近碰到一个问题,在Linux终端下怎么查看当前操作系统是什么,版本是什么。不同的Linux发行版不完全一样,查了一些资料现在总结如下。有以下命令可以查看:第一种方法:# lsb_release -aLSB Version: :core-4.0-ia32:core-4.0-noarch:graphics-4.0-ia32:graphics-4.0-noarch:printing-4.0-ia..._ubuntu 提示没有redhat

java对象json序列化时忽略值为null的属性_java 对象转json字符串 去除为空的属性 的注解-程序员宅基地

文章浏览阅读6k次。当一个对象里有些属性值为null 的不想参与json序列化时,可以添加如下注解复制代码import com.fasterxml.jackson.annotation.JsonInclude;import com.fasterxml.jackson.annotation.JsonIgnore;//这个是类注解,表示该类实例化的对象里,值为null的字段不参与序列化@JsonInclude(JsonInclude.Include.NON_NULL)@Setter@Getterpublic c._java 对象转json字符串 去除为空的属性 的注解

nginx重定向规则详细介绍_nginx重定向所有规则-程序员宅基地

文章浏览阅读474次。rewrite命令nginx的rewrite相当于apache的rewriterule(大多数情况下可以把原有apache的rewrite规则加上引号就可以直接使用),它可以用在server,location 和IF条件判断块中,命令格式如下:rewrite 正则表达式 替换目标 flag标记flag标记可以用以下几种格式:last – 基本上都用这个Flag。break – _nginx重定向所有规则

推荐文章

热门文章

相关标签