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;
		}
	}
相关推荐
moshuying1 天前
别让AI焦虑,偷走你本该有的底气
前端·人工智能
GIS之路1 天前
ArcPy,一个基于 Python 的 GIS 开发库简介
前端
可夫小子1 天前
OpenClaw基础-为什么会有两个端口
前端
喝拿铁写前端1 天前
Dify 构建 FE 工作流:前端团队可复用 AI 工作流实战
前端·人工智能
喝咖啡的女孩1 天前
React 合成事件系统
前端
从文处安1 天前
「九九八十一难」组合式函数到底有什么用?
前端·vue.js
用户5962585736061 天前
戴上AI眼镜逛花市——感受不一样的体验
前端
yuki_uix1 天前
Props、Context、EventBus、状态管理:组件通信方案选择指南
前端·javascript·react.js
老板我改不动了1 天前
前端面试复习指南【代码演示多多版】之——HTML
前端
panshihao1 天前
Mac 环境下通过 SSH 操作服务器,完成前端静态资源备份与更新(全程实操无坑)
前端