鼠标放上去div上下跳动动画效果transition hover

前端小云儿

于 2023-11-14 09:01:48 发布

阅读量299

点赞数

分类专栏：前端静态页面以及逻辑文章标签：前端 javascript html

本文链接：https://blog.csdn.net/jieweiwujie/article/details/134390803

版权

前端静态页面以及逻辑专栏收录该内容

117 篇文章 16 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

<template>
  <div>
    <h3>hover 鼠标放上去div上下跳动动画效果transition hover</h3>
    <div v-for="(item, index) in datamsg" :key="index" class="rxt-box-animate">
      {{ item }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datamsg: [
        "item自由活动web启动1",
        "item自由活动web启动2",
        "item自由活动web启动3",
      ],
    };
  },
  computed: {},
  components: {},
  methods: {},
};
</script>
<style scoped lang="scss">
.rxt-box-animate {
  cursor: pointer;
  transition: transform 0.5s;
}

.rxt-box-animate:hover {
  transform: translateY(-5px);
}
</style>