uniapp使用css方法来实现盒子的放大再到缩小动画

代码如下：

<template>
	<view class="content">
		<image src="/static/image/pull-gift.jpg" mode="aspectFit" style="width: 100%; height: 3085rpx;"></image>
		<view class="largen">
			<image src="/static/image/lin.png" mode="aspectFit" class="button"></image>
		</view>
		<view class="foot">
			<button class="buttonone">立即分享</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		position: relative;
		width: 100%;
		height: 100vh;
	}

	.largen {
		position: absolute;
		top: 770rpx;
		width: 320rpx;
		height: 120rpx;
		left: 0;
		right: 0;
		margin: 30rpx auto 0;
		/* background-color: antiquewhite; */
		font-size: 32rpx !important;
		animation: name 0.75s ease infinite;

	} 
	@keyframes name{
				 0% {transform: scale(1);}
				 50% {transform: scale(1.25);}
				 100% {transform: scale(1)}
	}
	

	.button {
		border-radius: 50rpx;
		height: 120rpx;
		width: 320rpx;
	}
	.foot{
		position: fixed;
		width: 100%;
		height: 150rpx;
		background-color: #ffffff;
		bottom: 0;
	}
	.buttonone{
		width: 90%;
		height: 80rpx;
		background-image: linear-gradient(to bottom, #f6d8b2, #f6b986);
		border-radius: 50rpx;
		margin: 30rpx auto;
		font-size: 30rpx;
		color: #dc2c33;
		font-weight: bold;
		line-height: 80rpx;
	}
</style>

关键代码：

 代表的意思是设置动画的名字叫做：name 一次循环的时间是0.75秒，infinite：无限循环

keyframes：关键帧，0%的时候原来的高度，50%的时候盒子是原来的1.25倍，100%返回原来的大小，图片效果如图所示：

图片路径可以自己找其他的图片来代替即可。