css实现按钮上白光动效

效果图

动态效果可复制代码本地查看

代码如下：

<template>
	<view>
		<view class="btn">
			按钮
		</view>
	</view>
</template>
<style lang="scss" scoped>
	.btn{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50rpx;
		width: 343rpx;
		height: 100rpx;
		background: linear-gradient(315deg, #7949FF 1%, #4D54FF 66%, #3486FF 100%);
		box-shadow: inset 10rpx 6rpx 48rpx -10rpx rgba(255,255,255,0.8000), inset 2rpx -4rpx 4rpx 0px rgba(104,78,255,0.4000);
		border-radius: 512rpx;
		color: #FFFFFF;
		position: relative;
		&::after{
			content: '';
			width: 60rpx;
			height: 100rpx;
			background: linear-gradient(97deg, rgba(255,255,255,0.0300) 0%, rgba(255,255,255,0.2000) 40%, rgba(255,255,255,0) 100%);
			opacity: 0.5;
			transform: skewX(-16deg);
			position: absolute;
			top: 0;
			left: -80rpx;
			animation: count 1s infinite ;
			animation-duration: alternate;
			animation-timing-function: ease-in;
		}
	}
	@keyframes count {
		to {
			left: 343rpx;
		}
		from {
			left:-100rpx
		}
	}
</style>