vue文字依次显示的效果

css yekong

vue文字依次显示的效果

动态效果

你可以使用CSS动画或JavaScript来实现文字依次显示的效果。以下是一个使用Vue和CSS动画的示例代码:

<template>
  <div class="text-container">
    <span class="text" v-for="(char, index) in titleArray" :style="{ '--delay': index * 0.1 + 's' }">{{ char }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "你的标题文字",
    };
  },
  computed: {
    titleArray() {
      return this.title.split('');
    }
  }
};
</script>

<style>
.text-container {
  display: flex;
}

.text {
  opacity: 0;
  transform: translateY(1em);
  animation: appear 0.5s forwards;
  animation-delay: var(--delay);
}

@keyframes appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

这个代码将title字符串分割成字符数组,并使用v-for指令为每个字符创建一个<span>元素。然后,使用CSS动画逐个显示每个字符。

你可以通过调整动画的持续时间和延迟来改变效果。在这个示例中,每个字符的延迟是前一个字符的延迟加0.1秒,你可以根据需要调整这个值。

喜欢