小程序css3動畫跑馬燈是一種在小程序中使用的CSS3動畫效果，可以讓小程序的頁面變得更加炫酷。通過設置不同的參數，可以讓跑馬燈在頁面的不同位置移動、閃爍、漸變等效果。
下面是一個簡單的使用示例：
1. 創建一個包含跑馬燈的HTML元素。
```html
<div class="跑馬燈">
<div class="火球">
<div class="火球火" style="background-color:red;width:20px;height:20px;"></div>
<div class="火球燈" style="background-color:yellow;width:30px;height:30px;"></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動畫效果來設置跑馬燈的樣式，讓跑馬燈在頁面上展現出不同的效果。