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

纯css实现波浪翻滚效果

发表于 11-30 17:04 显示全部楼层 5 45

在做一些酷炫的网站中,或者一些交互效果中,经常会有波浪的动态效果,波浪效果的制作有不同的方法,在这里我们通过纯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






回复 使用道具
举报
zikkl28

发表于 12-09 18:27 显示全部楼层

找东莞加工贸易交易平台?就上谷谷交易平台
回复 支持 反对 使用道具
举报
焯纽潼悟

发表于 12-03 22:13 显示全部楼层

不限流量不限网速,山区、农村、城镇高速免费上网不花钱!最新9500WG接收信号高达19公里,无论您身在地球任何一个角落,都能搜到信号实现免费上网,最新软件全自动智能管理,信号强,网速快,优先自动连接上网,免去您任何手动繁琐作,保证让您高速上网免费不花钱就是这么简单! 朋友们,您还在为家里装修要拉网线烦恼吗?还在忧愁每年交昂贵网费吗?还在苦恼出差无法上网吗?还在傻傻节省4G流量每月还要高达几十元流量费吗?还在敢怒不敢言的公司、学校、宿舍限制上网吗?还在苦逼每天站在阳台高举手机为了搜一个wifi吗?世界上最遥远的距离是明明有wifi,却用不了是多么痛苦的事!玩一会王者荣耀没了几个G的流量,看了一会视频,没了几个G的流量,壕!?还是无奈!?明明很节省,没用少则几十元多则上百元的流量费,如此高昂的费用是不是让您皱眉呢?没关系,用最新9500WG永久免费上网吧!只要238元让您永久免费上网不花钱,无需电脑,无需布线,只需插电,电脑、手机、平板免费上网就是这么任性,wifi信号覆盖高达19公里,无需站阳台,无需放窗外,想在哪里就在哪里!信号强,网速快,免费上网,能免则免,免费到底! 免费热线:188-2652-1502 客服QQ:1094201567 官网 www.ccyxf.com 9500WG
回复 支持 反对 使用道具
举报
崇拜

发表于 12-03 16:12 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
高分中二病

发表于 12-01 19:26 显示全部楼层

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对 使用道具
举报
大道至简

发表于 11-30 17:20 显示全部楼层

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

发表新文章
蓝明周老师

小码哥名师团队

0

学分

2320

学币

2511

积分

小码哥名师团队

Rank: 5Rank: 5

积分
2511

小码哥一周年勋章

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

精彩推荐

  • 关注小码哥教育