鼠标移入icon图标来回摆动

图标旋转

<template>
	<div style="display: flex">
		<div class="goods" v-for="(item, index) in list" :key="index">
			<i
				:class="['iconfont', item.icon]"
				@mouseenter="onmouseenter(index)"
				@mouseout="onmouseout(index)"></i>
			<span class="title">{{ item.title }}</span>
		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue'
const list = ref([
	{
		title: '我的商品',
		icon: 'icon-wodekuaidi'
	},
	{
		title: '我的订单',
		icon: 'icon-shangpincuxiao'
	},
	{
		title: '我的余额',
		icon: 'icon-wodezuji'
	}
])
const onmouseenter = (index) => {
	let imgList = document.getElementsByClassName('iconfont')
	imgList[index].style.animation = 'enter 1s linear infinite'
}
const onmouseout = (index) => {
	let imgList = document.getElementsByClassName('iconfont')
	imgList[index].style.animation = 'out 1s linear infinite'
}
</script>
<style>
body {
	font-size: 14px;
}
.goods {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-right: 12px;
}
.title {
	font-size: 8px;
}
@keyframes enter {
	0% {
		transform: rotate(20deg);
	}
	50% {
		transform: rotate(-20deg);
	}
	100% {
		transform: rotate(20deg);
	}
}
@keyframes out {
	100% {
		transform: rotate(0deg);
	}
}
</style>