动态效果
你可以使用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秒,你可以根据需要调整这个值。