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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!