Vue 顶部栏滚动控制显隐和文字字体闪光动画效果随笔

最新推荐文章于 2025-10-18 17:01:29 发布

原创最新推荐文章于 2025-10-18 17:01:29 发布 · 847 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #vue.js #uiscrollview

Vue2.x 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现顶部导航栏随滚动显示隐藏的效果，并通过CSS实现了文字渐变颜色过渡动画。该组件在页面滚动超过100像素时显示导航栏，并对NEW文字应用了从左到右的渐变背景动画。

Vue top栏滚动显隐和文字字体颜色过渡动画效果随笔

好长时间没用css动画效果了，今天恰好在封装某个组件时用上，随笔记下。

<template>
  <div class="contain">
    <div v-show="isShow" class="scrollBox">
      <p class="font">NEW</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ScrollTop',
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    window.addEventListener('scroll', this.scrollHandler);
  },
  unmounted() {
    window.addEventListener('scroll', this.scrollHandler);
  },
  methods: {
    scrollHandler() {
      const top = document.documentElement.scrollTop;
      console.log(top);
      if (top > 100) {
        // 滚动条滚动距离超过100时
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    },
  },
};
</script>

css样式部分

<style lang="scss" scoped>
::v-deep.el-dialog__headerbtn {
  font-size: 12px;
}
.scrollBox {
  width: 800px;
  height: 500px;
  background: white;
}
.contain {
  z-index: 200000;
  top: 60px;
  position: fixed;
  font-size: 60px;
}
.font {
  color: #5ba6df;
  background-image: -webkit-linear-gradient(left, #c92e2e, #c02323 25%, #d8abab 50%, #c2283c 75%, #d41616 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 1s infinite linear;
  font-family: Chaparral Pro Light;
  letter-spacing: 2px;
  font-size: 56px;
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}
</style>