uni-app：设置图片一直旋转

核心代码

标签

<view class="search_tip_icon">
	<image :src="refresh1_icon">image>
view>

 样式

animation: spin 2s linear infinite;

//animation-name: spin;：指定要应用的动画名称为 spin。该名称对应了 @keyframes 中定义的动画效果。
// animation-duration: 2s;：指定动画的持续时间为 2 秒。也就是说，从开始到结束的过程将花费 2 秒的时间。
// animation-timing-function: linear;：指定动画的时间函数为线性（linear），表示动画在整个过程中以相同的速度进行变化。
// animation-iteration-count: infinite;：指定动画的重复次数为无限次。也就是说，动画会无限循环执行。

.search_tip_icon {
	display: flex;
	align-items: center;
	margin-right: 3%;
 
	image {
		width: 40rpx;
		height: 40rpx;
		animation: spin 2s linear infinite;	
	}
 
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
 
		to {
			transform: rotate(360deg);
		}
	}
 
}