JavaScript+css实现转向灯、双闪、animation、animation-iteration-count、keyframes、infinite、循环动画、动画执行无限次

---

1、html部分

<div id="app">
    <div class="box">
        <div class="lamp-box">
            <span v-if="leftLamp">←</span>
            <span v-if="doubleFlash">←→</span>
            <span v-if="rightLamp">→</span>
        </div>

        <div class="button-box">
            <el-button type="success" @click="clickButton('leftLamp')">左转</el-button>
            <el-button type="danger" @click="clickButton('doubleFlash')">双闪</el-button>
            <el-button type="success" @click="clickButton('rightLamp')">右转</el-button>
        </div>
    </div>
</div>

---

2、JavaScript部分

new Vue({
    
    
    el: "#app",
    data() {
    
    
        return {
    
    
            leftLamp: false,
            doubleFlash: false,
            rightLamp: false
        }
    },

    methods: {
    
    
        clickButton(type) {
    
    
        	// 关闭
            if (this[type]) {
    
    
                this[type] = false;
                return false;
            }
            this.leftLamp = false;
            this.doubleFlash = false;
            this.rightLamp = false;
            this[type] = !this[type];
        }
    }
});

---

3、css部分

.box {
    
    
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lamp-box,
.button-box {
    
    
    border: 1px solid #777;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 130px;
    margin-top: 20px;
}

.lamp-box>span {
    
    
    font-size: 60px;
    font-weight: 600;
    animation-name: myfirst;
    animation-duration: 1s;
    /* 
     * 播放动画的次数
     * infinite 无限次
     */
    animation-iteration-count: infinite;
}

@keyframes myfirst {
    
    
    0% {
    
    
        color: #ff0000;
    }

    100% {
    
    
        color: transparent;
    }
}

---

4、效果演示

4.1、微信小程序码

---

4.2、普通二维码