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

编程之家收集整理的这篇文章主要介绍了前端必学的CSS3波浪效果演示编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目录

文章目录

前言

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,0.7" />
						<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,0.5)" />
						<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(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,#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);
    }
    100% {
        transform: translate3d(85px,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,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,#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);
    }
}
/*Shrinking for mobile*/
@media (max-wIDth: 768px) {
    .waves {
        height: 40px;
        min-height: 40px;
    }
    .content {
        height: 30vh;
    }
    h1 {
        Font-size: 24px;
    }
}

总结

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

解锁查看全部内容

付费后查看完整内容
限时 微信扫码支付 ¥9.9 19.9

总结

以上是编程之家为你收集整理的前端必学的CSS3波浪效果演示全部内容,希望文章能够帮你解决前端必学的CSS3波浪效果演示所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

CSS相关文章

谁说程序员不懂浪漫! -- 送女朋友的网页小惊喜,感动她100年。
在开发中,如果没有动画的话,整个页面内容的显示和隐藏会非常的生硬!不好看,为了给予一定的用户体验,进入今天的主题React框架本身并没有提供任何动画相关的API,所以如果需要使用的话可以使用一个第三方库react-transition-group Vue中为我们提供了一些内置的组件和对应的API来完成动画一、Transition组件的原理当插入或删除包含在transition组件中的元素时,vue将会做以下处理就是会自动把类加入到transition组件下的根元素中添加或者删..
用html、css、JavaScript做的小特效实现功能:点击下方图片可翻转到对应图片实现思路:魔方中用标签包含图片,方便用包裹,后面给ul添加3D模式便可进行翻折
毕业那天都不许给我哭,给我微笑着滚蛋。
html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)
圆环进度条 两种实现方式
网页简介:经过pink老师的课程学习之后,制作了一个简单的静态页面,其中的重点内容是对所学css样式的编写格式,顺序等进行规范练习,对页面结构的规划安排,对html,css基本内容的熟练,对浮动,定位,盒子模型嵌套的运用等。
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注