CSS 文字弹跳效果

2023-12-26 23:58:45

请添加图片描述

鼠标移过去 会加快速度

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

教学视频地址

点击跳转教学视频

文章来源:https://blog.csdn.net/weixin_54226053/article/details/135233116
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。