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

1、html部分

<div id="app"> <div class="box"> <div class="lamp-box"> <span v-if="leftLamp">← 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、普通二维码