下面是一个使用Angular实现水平文本走马灯的示例代码:
ngFor
指令循环遍历要显示的文本数组,并为每个文本项应用一个动画效果:
{{ text }}
.marquee {
width: 100%;
overflow: hidden;
}
.marquee-content {
display: inline-block;
white-space: nowrap;
padding: 10px;
}
@keyframes marquee-animation {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
.marquee-content {
animation: marquee-animation 10s linear infinite;
}
import { Component } from '@angular/core';
import { trigger, transition, animate, style } from '@angular/animations';
@Component({
selector: 'app-marquee',
templateUrl: './marquee.component.html',
styleUrls: ['./marquee.component.css'],
animations: [
trigger('move', [
transition(':enter', [
style({ transform: 'translateX(100%)' }),
animate('10s linear')
])
])
]
})
export class MarqueeComponent {
texts = ['Text 1', 'Text 2', 'Text 3'];
}
请确保在使用该示例代码之前已在项目中安装了@angular/animations
模块。