CSS 文字弹跳效果

鼠标移过去 会加快速度

<template><div class="bounce"><p class="text" :style="{animationDuration: animationDuration}">欢迎使用UniApp Vue3！</p></div>
</template><script>
export default {name: 'Bounce',data() {return {animationDuration: '0.5s',};},mounted() {this.$el.querySelector('.text').addEventListener('mouseover', () => {this.animationDuration = '0.2s';});this.$el.querySelector('.text').addEventListener('mouseout', () => {this.animationDuration = '0.5s';});},
};
</script><style scoped>
.bounce {display: flex;justify-content: center;align-items: center;height: 100vh;
}.text {font-size: 24px;font-weight: bold;color: #333;animation: bounce 1s infinite;
}@keyframes bounce {0% {transform: translateY(0);}50% {transform: translateY(-30px);}100% {transform: translateY(0);}
}
</style>

教学视频地址

点击跳转教学视频