请选择 进入手机版 | 继续访问电脑版

纯css实现波浪翻滚效果

发表于 2017-11-30 17:04 显示全部楼层 15 724

在做一些酷炫的网站中,或者一些交互效果中,经常会有波浪的动态效果,波浪效果的制作有不同的方法,在这里我们通过纯css来实现,通过css“浪起来”!


我们所需要做的效果:


wavesport.gif


基础代码:

        <style>
		*{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		.wrap{
			width: 800px;
			border: 1px solid #000;
			margin: 0 auto;
			padding: 50px 0;
			text-align: center;
		}
		
		/* 基础样式 */
		.wave{
			width: 400px;
			height: 200px;
			margin: 0 auto 50px;
			border: 1px solid #000;
			position: relative;
			overflow: hidden;
			background: skyblue;
		}
		.wave::before,.wave::after{
			content:'';
			width: 600px;
			height: 600px;
			border-radius: 44%;
			display: block;
			position: absolute;
			left: 50%;
			margin-left: -300px;
			bottom: 40px;
		}
		.wave::before{
			background: #fff;
			z-index: 2;
			bottom: 50px;
			
		}
		.wave::after{
			border-radius: 46%;
			background: rgba(255,255,255,.2);
			z-index: 1;
			
		}

	</style>
	
	<div class="wrap">
		<h2>静态波浪效果</h2>
		<div class="wave wave1">
		</div>
		<h2>动态波浪效果</h2>
		<div class="wave wave2">
		</div>
		<h2>鼠标悬停触发效果</h2>
		<div class="wave wave3">
		</div>
	</div>


通过基础代码可以得到,静态的波浪样式;


wavestop.png


动态的波浪效果就是通过css3的animation来制作;


添加代码:

                /* 动态波浪  */
		.wave2::before,.wave2::after{
			animation: lang linear infinite;
		}
		.wave2::before{
			animation-duration: 10s;
		}
		.wave2::after{
			animation-duration: 11s;
		}

		@keyframes lang{
			0%{ transform: rotate(0deg) translate(-1%,0); }
			50%{ transform: rotate(180deg) translate(-1%,-2%) ; }
			100%{ transform: rotate(360deg) translate(-1%,0); }
		}


所得到的效果:


wavesport.gif


通过过渡属性可以制作出鼠标悬停,波浪运动的效果;


添加代码:

                /* 鼠标悬停触发效果 */
		.wave3::before,.wave3::after{
			transition: 6s linear
		}
		
		.wave3:hover::before,.wave3:hover::after{
			transform: rotate(360deg) translate(-1%,-2%);
			bottom: 80%;
		}


所得到的效果:


wavehover.gif


波浪效果的原理?


原理其实很简单,就是通过椭圆形的两个伪元素发生旋转,对父级(背景)进行遮罩,在视觉形成波浪翻滚的效果;实际上蓝色背景的元素并没有发生任何运动。


两个发生旋转的椭圆需要进行放大,只需要其中的局部范围即可,所以通过父级进行控制;


原理图如下:

        wavesecret.gif

    

最后,如果想让波浪效果更自然,效果更好,可以在发生运动的时候通过调整伪元素的圆角强度,位移以及透明度,这些细节大家可以多测试;


demo文件下载:

纯css实现波浪效果.zip






回复 使用道具
举报
破葫芦

发表于 02-17 05:27 显示全部楼层

回复 支持 反对 使用道具
举报
目定口呆

发表于 02-14 08:01 显示全部楼层

回复 支持 反对 使用道具
举报
周牧

发表于 02-12 01:39 显示全部楼层

别人说是金子总要发光的,我就来看看。

回复 支持 反对 使用道具
举报
百变小辉辉

发表于 02-07 16:58 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
小明不易做

发表于 02-06 16:56 显示全部楼层

好文章,必须帮顶!!!

回复 支持 反对 使用道具
举报
熊猫党

发表于 01-30 00:52 显示全部楼层

好文章,必须帮顶!!!

回复 支持 反对 使用道具
举报
一鸣

发表于 01-26 18:45 显示全部楼层

回复 支持 反对 使用道具
举报
无戒

发表于 01-19 21:58 显示全部楼层

活跃活跃论坛气氛~求楼主加好友

回复 支持 反对 使用道具
举报
begeekmyfriend

发表于 01-12 11:04 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
12下一页

发表新文章
蓝明周老师

小码哥名师团队

0

学分

2402

学币

2597

积分

小码哥名师团队

Rank: 5Rank: 5

积分
2597

小码哥一周年勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育