css 按钮的脉冲光环动画,强调动画。

效果图:

部分代码:

javascript 复制代码
<view class="topBtn" :class="{ 'disabled': disabled }" :style="{
				left: `${position.x}px`,
				top: `${position.y}px`
			}" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
			<slot></slot>
		</view>
javascript 复制代码
.topBtn {
		position: fixed !important;
		z-index: 9999 !important;
		width: 100rpx !important;
		height: 100rpx !important;
		background: #3c9cff !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 4rpx 12rpx rgba(60, 156, 255, 0.6) !important;
		cursor: pointer !important;
		user-select: none !important;
		touch-action: none !important;
		/* 注意:这里不再对按钮本身做 pulse 动画 */
	}
	
	/* 脉冲光环 - 使用伪元素 */
	.topBtn::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #3c9cff; /* 和按钮同色 */
		opacity: 0.6;
		animation: pulseRing 2s infinite ease-out;
		z-index: -1; /* 在按钮下方 */
	}
	
	@keyframes pulseRing {
		0% {
			transform: scale(0.8);
			opacity: 0.6;
		}
		70% {
			transform: scale(1.4);
			opacity: 0.2;
		}
		100% {
			transform: scale(1.6);
			opacity: 0;
		}
	}
相关推荐
BD_Marathon1 小时前
【JavaWeb】CSS_三大选择器
前端·css
jump6801 小时前
柯里化
前端
NeoInfra1 小时前
全面解读ThinkPHP 5.0:现代PHP框架的架构演进与安全实践
前端
一 乐1 小时前
宠物店管理|基于Java+vue的宠物猫店管理管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
qq_229058011 小时前
react的3中请求
前端·react.js·前端框架
渴望成为python大神的前端小菜鸟1 小时前
VUE 面试题
前端·javascript·vue.js·面试题
想要成为糕糕手1 小时前
深入理解 JavaScript 中的 “this”:从自由变量到绑定规则
前端·javascript
北极象1 小时前
Electron + Playwright 一文多发应用架构设计
前端·javascript·electron
咖猫1 小时前
guacamole-web 1.5.5 index.html
前端·javascript·html