下面是一个简单的使用示例：
1. 创建一个包含跑马灯的HTML元素。
“`html
<div class=”跑马灯”>
<div class=”火球”>
<div class=”火球火”></div>
<div class=”火球灯”></div>
</div>
</div>
2. 在小程序的CSS文件中，定义跑马灯的类名和样式。
“`css
.跑马灯 {
position: relative;
width: 100%;
height: 200px;
.火球 {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: red;
animation: 火球 1s infinite;
.火球.火 {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
.火球.灯 {
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
@keyframes 火球 {
0% {
transform: translateY(0);
opacity: 1;
100% {
transform: translateY(100px);
opacity: 0;
@keyframes 火球.火 {
0% {
transform: translateY(0);
opacity: 1;
100% {
transform: translateY(100px);
opacity: 0;
@keyframes 火球.灯 {
0% {
transform: translateY(0);
opacity: 1;
100% {
transform: translateY(100px);
opacity: 0;
3. 在小程序的JavaScript文件中，调用跑马灯的动画效果。
“`javascript
// 获取页面元素
const page = document.querySelector(‘#app’);
// 定义跑马灯的父元素
const灯 = page.querySelector(‘.跑马灯’);
// 设置跑马灯的宽度和高度
灯.style.width = ‘100%’;
灯.style.height = ‘200px’;
// 设置跑马灯的样式
灯.classList.add(‘火球’);
灯.classList.add(‘火球.火’);
灯.classList.add(‘火球.灯’);
通过以上步骤，就可以在小程序中使用CSS3动画效果来设置跑马灯的样式，让跑马灯在页面上展现出不同的效果。