在vue中CSS控制一个元素或图片进行上下左右的反复移动

记录一个常用的样式动作

元素代码

这里就不累述图片的变化了，直接默认是一个大div即可。

<!--    图片集合-->
<div class="view" >
 
</div>

CSS代码

<style scoped>
.view {
	/*
		jumpBoxHandler  动作函数
		2s  动作持续两秒
		infinite 无限循环
	*/
  animation: jumpBoxHandler  2s infinite;
}

@keyframes jumpBoxHandler {
  0% {
    transform: translate(0px, 0px);/*开始位置*/
  }
  50% {
    transform: translate(15px, 15px); /* 可配置跳动方向 */
  }
  100% {
    transform: translate(0px, 0px);/*结束位置*/
  }
}
</style>

多重移动

这里就不帖详细代码了，总之多重移动就是多创建一个动作函数并用新的class绑定这个函数，通过js代码来控制元素的class即可。

完！