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;
		}
	}
相关推荐
陈随易12 分钟前
一个网吧网管,做了个网页,卖了 5000 万
前端·后端·程序员
jktantan9 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
2601_9628857210 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel10 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓10 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人10 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every10 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad11 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新12 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易12 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员