<template>
<div class="container">
<span>e</span>
<span>安</span>
<span>惠</span>
<span>陪</span>
<span>诊</span>
<span>服</span>
<span>务</span>
<span>平</span>
<span>台</span>
</div>
</template>
<style lang="scss" scoped>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
span {
font-size: 32px;
color: #faebd7;
animation: colorChange 1s infinite alternate;
}
}
@keyframes colorChange {
to {
color: #ff0266;
}
}
@for $i from 1 through 9 {
span:nth-child(#{$i}) {
animation-delay: ($i - 1) * 0.2s;
}
}
</style>
CSS文字连续光影特效
于 2024-08-13 15:41:39 首次发布