uniapp 仿支付宝首页流光按钮效果流光动画实现

迈不过友情╰ 2021-07-25 23:35 631阅读 0赞

# 支付宝流光按钮效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
效果动效：

1.  按钮从小到大并出现弹跳效果
2.  流光自左向右滑过

最终实现效果如下图所示：  
![在这里插入图片描述][20201202115008677.png]

代码如下：

<view class="ceshi">
    	12点开抢
    </view>
    <style lang="scss">
    @keyframes heart{ 
    	0%{ 
    		transform:scale(0.9);
    	}
    	60%{ 
    		transform:scale(1);
    	}
    	80%{ 
    		transform:scale(0.9);
    	}
    	95%{ 
    		transform:scale(1);
    	}
    	100%{ 
    		transform:scale(0.9);
    	}
    }
    .ceshi{ 
    	width:400upx;
    	margin:0 auto;
    	height:100upx;
    	text-align: center;
    	line-height: 100upx;
    	background:red;
    	border-radius: 50upx;
    	font-size:40upx;
    	font-family: monospace;
    	color:#fff;
    	position: relative;
    	overflow: hidden;
    	background:linear-gradient(to right,#FB0605,#FEA154);
    	animation: heart 2s ease-in-out infinite;
    	&::before{ 
    		content: '';
    		position: absolute;
    		background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6));
    		width: 200%;
    		height: 100rpx;
    		left: 140%;
    		top: 0;
    		bottom: 0;
    		margin: auto;
    		transform: rotateZ(-45deg);
    		animation: isLeft 2s ease-in-out infinite;
    	}
    }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201202114106460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA=,size_16,color_FFFFFF,t_70
[20201202115008677.png]: https://img-blog.csdnimg.cn/20201202115008677.png