CSS 文字弹跳效果

特创数字科技2023-12-28 12:56

鼠标移过去会加快速度

复制代码

<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>

教学视频地址

点击跳转教学视频