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;
		}
	}
相关推荐
四瓣纸鹤2 分钟前
F2图表在Vue3中的使用方法
前端·javascript·vue.js·antv/f2
web前端1239 分钟前
# @shopify/react-native-skia 完整指南
前端·css
shanLion9 分钟前
从 iframe 到 Shadow DOM:一次关于「隔离」的前端边界思考
前端·javascript
精神状态良好12 分钟前
RAG 是什么?如何让大模型基于文档作答
前端
CRAB12 分钟前
解锁移动端H5调试:Eruda & VConsole 实战指南
前端·debug·webview
OpenTiny社区12 分钟前
Vue2/Vue3 迁移头秃?Renderless 架构让组件 “无缝穿梭”
前端·javascript·vue.js
敲代码的独角兽13 分钟前
深入理解 JavaScript 异步机制:从回调到 Promise 再到 async/await
前端
清风乐鸣16 分钟前
刨根问底栏目组 - 学习 Zustand 的广播哲学
前端
yxorg27 分钟前
vue自动打包工程为压缩包
前端·javascript·vue.js
Bigger37 分钟前
shadcn-ui 的 Radix Dialog 这两个警告到底在说什么?为什么会报?怎么修?
前端·react.js·weui