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;
		}
	}
相关推荐
霍理迪13 小时前
JS作用域与预解析
开发语言·前端·javascript
切糕师学AI13 小时前
.NET Core Web 中的健康检查端点(Health Check Endpoint)
前端·kubernetes·.netcore
rosmis13 小时前
地铁病害检测系统软件改进记录-2-02
开发语言·前端·javascript
css趣多多13 小时前
解决ui组件flex1容器底部被撑开的问题
前端
乔江seven13 小时前
【python轻量级Web框架 Flask 】2 构建稳健 API:集成 MySQL 参数化查询与 DBUtils 连接池
前端·python·mysql·flask·web
Alaaaaaaan14 小时前
[DevOps]使用github-action工具部署docker容器(实现提交代码一键推送部署到服务器)
服务器·前端·docker·容器·github
摇滚侠14 小时前
css 设置边框
前端·css
星爷AG I14 小时前
9-24 视觉叙事(AGI基础理论)
前端·人工智能
2501_9400078914 小时前
Flutter for OpenHarmony三国杀攻略App实战 - 鸿蒙适配与打包发布
前端·flutter
css趣多多14 小时前
跨域问题及Vue项目中本地/线上解决方法核心总结
前端