vue实现动画旋转(类名为a-round),文字不旋转 (类名为round-item)
鼠标移入实现动画的暂停,移出实现动画的运行
本实例为个人总结,转载请标明出处
<template>
<div>
<div class="a-content" @mouseenter="mouseEnter" @mouseleave="mouseLeave">
<div class="a-left">
<ul class="a-round" :style="{'animation-play-state':animationShow}">
<li class="round-item" v-for="(item,index) in round" :key="item.id" :style="{top:item.pTop,'animation-play-state':animationShow}">
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
animationShow:""
}
},
methods: {
mouseEnter() {
this.animationShow="paused"
},
mouseLeave() {
this.animationShow="running"
}
}
};
</script>
<style lang="less" scoped>
.a-round {
transform: rotate3d(0,0,0,0deg);
animation: access 30s infinite linear;
@keyframes access {
0% {
transform: rotate3d(0,0,0,0deg);
}
to {
transform: rotate3d(0,0,1,360deg);
}
}
.round-item {
transform:rotate3d(0,0,1,360deg);
animation: access1 30s infinite linear;
@keyframes access1 {
0% {
transform: rotate3d(0,0,1,360deg);
}
to {
transform: rotate3d(0,0,0,0);
}
}
}
}
}
</style>