CSS3实现水波纹扩散效果

最新推荐文章于 2024-04-22 14:48:45 发布
最新推荐文章于 2024-04-22 14:48:45 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： 前端 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwaner/article/details/106257966
版权

效果代码

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" />
		<title>圆点扩散</title>
		<style type="text/css">
			body {
				background: #333;
			}

			.tips {
				width: 6px;
				height: 6px;
				position: relative;
				cursor: pointer;
				margin: 120px auto 0;
			}


			.tips b {
				width: 100%;
				height: 100%;
				background: #fff;
				border-radius: 50%;
				display: block;
				background-color: rgba(255, 255, 255, 0.6);
				position: absolute;
				left: 0;
				top: 0;
				z-index: 1;
			}

			.tips b:nth-of-type(1) {
				-webkit-animation: click1 1s linear infinite;
				animation: click1 1s linear infinite;
				background-color: #1f868e;
				/* opacity: .7; */
			}

			.tips b:nth-of-type(2) {
				-webkit-animation: click2 1s linear infinite;
				animation: click2 1s linear infinite;
				background-color: #1f868e;
				/* opacity: .7; */
			}
				
			@-webkit-keyframes click1 {
			        0% {
			            opacity: .8;
			            -webkit-transform: scale(1);
			            transform: scale(1);
			        }
			        100% {
			            opacity: 0;
			            -webkit-transform: scale(2);
			            transform: scale(2);
			        }
			    }
			
			    @keyframes click1 {
			        0% {
			            opacity: .8;
			            -webkit-transform: scale(1);
			            transform: scale(1);
			        }
			        100% {
			            opacity: 0;
			            -webkit-transform: scale(2);
			            transform: scale(2);
			        }
			    }
			
			    @-webkit-keyframes click2 {
			        0% {
			            opacity: .8;
			            -webkit-transform: scale(1);
			            transform: scale(1);
			        }
			        100% {
			            opacity: 0;
			            -webkit-transform: scale(3);
			            transform: scale(3);
			        }
			    }
			
			    @keyframes click2 {
			        0% {
			            opacity: .8;
			            -webkit-transform: scale(1);
			            transform: scale(1);
			        }
			        100% {
			            opacity: 0;
			            -webkit-transform: scale(3);
			            transform: scale(3);
			        }
			    }
				
				.tips2 {
					width: 6px;
					height: 6px;
					position: relative;
					cursor: pointer;
					margin: 120px auto 0;
				}
				
				.tips2 b {
					width: 100%;
					height: 100%;
					background: #fff;
					border-radius: 50%;
					display: block;
					background-color: rgba(255, 255, 255, 0.6);
					position: absolute;
					left: 0;
					top: 0;
					z-index: 1;
				}
				
				.tips2 b:nth-of-type(1) {
					-webkit-animation: click1 1s linear infinite;
					animation: click1 1s linear infinite;
					background-color: #134c92;
					/* opacity: .7; */
				}
				
				.tips2 b:nth-of-type(2) {
					-webkit-animation: click2 1s linear infinite;
					animation: click2 1s linear infinite;
					background-color: #134c92;
					/* opacity: .7; */
				}
					
				@-webkit-keyframes click1 {
				        0% {
				            opacity: .8;
				            -webkit-transform: scale(1);
				            transform: scale(1);
				        }
				        100% {
				            opacity: 0;
				            -webkit-transform: scale(2);
				            transform: scale(2);
				        }
				    }
				
				    @keyframes click1 {
				        0% {
				            opacity: .8;
				            -webkit-transform: scale(1);
				            transform: scale(1);
				        }
				        100% {
				            opacity: 0;
				            -webkit-transform: scale(2);
				            transform: scale(2);
				        }
				    }
				
				    @-webkit-keyframes click2 {
				        0% {
				            opacity: .8;
				            -webkit-transform: scale(1);
				            transform: scale(1);
				        }
				        100% {
				            opacity: 0;
				            -webkit-transform: scale(3);
				            transform: scale(3);
				        }
				    }
				
				    @keyframes click2 {
				        0% {
				            opacity: .8;
				            -webkit-transform: scale(1);
				            transform: scale(1);
				        }
				        100% {
				            opacity: 0;
				            -webkit-transform: scale(3);
				            transform: scale(3);
				        }
				    }
			
		</style>
	</head>
	<body>
		<div class="tips">
			<span></span>
			<b></b>
			<b></b>
			<b></b>
		</div>
		
		<div class="tips2">
			<span></span>
			<b></b>
			<b></b>
			<b></b>
		</div>
	</body>
</html>
漠河愁
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 实心圆波纹状向外扩散
qq_42454206的博客
06-14 3781
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
css 波纹扩散_html5+ js +css3 点击后水波纹扩散效果 兼容移动端
weixin_39902085的博客
12-24 597
一、概述:其实很早就看到过点击后水波纹扩散效果这种了，APP中比较常见，所以今天特意找了一些资料然后做成DEMO分享给大家，让大家更容易的学到并运用到实际项目中去。实例效果如下：现在 新版 chrome 59.0 PC端 在【设置】中很多操作按钮已经有这个效,果如下：二、实现原理:1、超出按钮隐藏;2、里面新增加标签模拟圆;3、用JS控制圆的宽度及坐标;4、关键是css3样式控制从小到大逐渐透明的...
css —— 按钮水波纹扩散动画效果实现
Mickeymouse
04-26 4243
水波纹动画效果
css水波纹涟漪圆点效果
最新发布
weixin_45842655的博客
04-22 401
【代码】css水波纹涟漪圆点效果。
水波扩散CSS3动画按钮特效代码
03-20
水波扩散CSS3动画按钮代码是一款扁平按钮鼠标点击按钮水波扩散动画效果。
css实现文字断裂效果
qq_48209039的博客
01-28 1128
clip-path属性 创建一个只有元素的部分区域，可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 html <h1 data-text="Text Crack"> <span>Text Crack</span> </h1> 使用元素的伪元素复制两份文本，再使用 clip-path 将元素本身、元素的两个伪元素分为3部分，分别对这3部分进行控制 scss body, html { display: flex; he
vue 鼠标点击特效动画（css3动画），水波纹动画效果
haolangtaiye的博客
08-27 6435
效果展示 使用 在App.vue 中引用即可 代码如下 //waves.vue <template> <div class="Waves"> <div class="main-container"> <div class="waves"> <div class="wave" v-for="(item, key) in waves" :key="key"
仅用CSS几步实现赛博朋克2077风格视觉效果
weixin_43816501的博客
11-07 1320
仅用CSS几步实现赛博朋克2077风格视觉效果 背景 文章开始之前先简单了解下什么是赛博朋克，以及什么是赛博朋克2077。 赛博朋克(Cyberpunk)是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的霓虹灯、街排标志性广告以及高楼建筑等，通常搭配色彩是...
css3+js实现水波纹效果
03-28
css3+js实现水波纹效果，跟随点击位置为中心扩散，效果很不错，适用于主流浏览器。
水波纹扩散效果
04-05
在iOS开发中，实现动态效果往往能够提升用户体验，其中水波纹扩散效果就是一个常见的视觉元素，常用于按钮点击、界面切换等场景。本案例由TheLittleBoy创作，源码库名为HXCircleAnimation，旨在提供一个高质量的水波...
css实现水波纹loading效果
04-01
CSS不仅可以控制页面布局，还可以实现丰富的动态效果，比如我们这里关注的“水波纹loading效果”。这种效果通常用于网页加载时提供视觉反馈，展示数据正在加载的过程，既美观又实用。 首先，我们要理解“水波纹”...
css3实现的圆形从中心向四周扩散动画效果
09-08
css3实现的圆形从中心向四周扩散动画效果
水波扩散CSS3动画按钮代码
06-24
水波扩散CSS3动画按钮代码是一款扁平按钮鼠标点击按钮水波扩散动画效果。
html5 水波扩散效果
12-09
插件描述：HTML5实现点击水波扩散效果. 参考示例：http://www.jq22.com/jquery-info5017
css 波纹扩散_css3实现支付宝波纹扩散的功能原理
weixin_39634052的博客
12-24 438
今天讲一个比较简单的css3的特效吧。之前在使用支付宝的时候，我偶然间发现支付宝有一个页面，有一个波纹扩散的特效，还挺有意思。正巧这几天，我在开发小程序的时候，也遇到了这个需求，所以简单做了个demo。知乎视频​www.zhihu.com还是分析需求从特效上看，是类似水波的效果，圆形的边缘向外扩散，且每一层的扩散的特效(包括延展的宽度，和波纹的深浅)都是不一样。好，现在来分析需求，我们以3个圆圈为...
HTML水波扩散效果,CSS3+H5水波扩散特效
weixin_36164462的博客
06-04 365
水波扩散特效扩散特效@keyframes warn {0% {transform: scale(0);opacity: 0.0;}25% {transform: scale(0);opacity: 0.1;}50% {transform: scale(0.1);opacity: 0.3;}75% {transform: scale(0.5);opacity: 0.5;}100% {transfor...
CSS3+H5水波扩散特效
勤快的小蚂蚁的博客
05-27 2039
扩散特效 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>扩散特效</title> <style> @keyframes warn { 0% ...
css涟漪光圈扩散_CSS3动画之：水波涟漪般的定位样式
weixin_34731825的博客
12-29 618
CSS3动画之：水波涟漪般的定位样式Sponsor近期工作要做一个用于图像定位的标识，为了让这个指示标识不死板，决定做个简单的动画，动画效果像波浪一样波动，这样标识就更美观好看了，喜欢的同学可以跟着来学，十分简单，欢迎指正交流。先上效果图：教程本动画需要用到的主要属性：animation, transition 和 Keyframes属性，属性详情可以去 w3school 中文站查看相关动画属性...
css实现圆球旋像水波波动_Three.js图像波动特效
weixin_39814369的博客
11-24 481
近些年，我们经常会在一些网站上看到些炫酷的图片特效，这些效果大部分都是用WEBGL技术实现的， 借助shader我们可以实现css无法做到的炫酷视觉效果 。随着这门技术的兼容性越来越好，普及率越来越高，掌握它必将为你工作中的加分项。还在等什么？一起来学习下吧。这次我们用three.js来实现一个图像波动特效，剖析其实现原理，最终可以举一反三，变成自己的东西，先来看效果。图片变形特效演示实...
css 实现水波纹效果
07-25
要实现水波纹效果，可以使用CSS的伪元素和动画来实现。下面是一个简单的示例代码： HTML: ```html <div class="ripple-container"> <div class="ripple"></div> </div> ``` CSS: ```css .ripple-container { position: relative; width: 200px; height: 200px; } .ripple { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-radius: 50%; border: 2px solid #00aaff; animation: rippleEffect 1s linear infinite; } @keyframes rippleEffect { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 200px; height: 200px; opacity: 0; } } ``` 在上面的示例中，我们创建了一个包含两个元素的容器，`.ripple-container` 是一个相对定位的容器，`.ripple` 是一个绝对定位的元素，用于展示水波纹效果。 通过设置 `.ripple` 元素的位置和样式，我们将其放置在容器的中心位置。然后，我们使用 `@keyframes` 定义了一个名为 `rippleEffect` 的动画，控制水波纹的展开和淡出效果。 通过将动画应用于 `.ripple` 元素，并设置适当的动画持续时间和无限循环，我们可以实现水波纹的效果。 你可以根据需要调整容器和水波纹的大小、颜色和动画效果等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值