当前位置：首页 > news >正文

【vue】圆环呼吸灯闪烁效果(模拟扭蛋机出口处灯光）

news 2025/6/23 16:32:44

效果图先发：
在这里插入图片描述
页面部分：

<div ref="round" class="round"><div class="light" ref="light"/><div class="box"></div></div>

js部分(控制圆环生成）;

setRound() {let lightFragment = document.createDocumentFragment();for (let i = 0; i < 10; i++) {let lightItem = document.createElement('span');let deg = (360 / 10) * ilightItem.style.transform = `rotate(${deg}deg)`;lightItem.classList.add('ball_span')lightFragment.appendChild(lightItem);}this.$refs.light.appendChild(lightFragment);},

样式部分：
（js动态部分的样式需要放在不加scope的标签中）

.ball_span {position: absolute;top: 0;left: 0;right: 0;margin: 0 auto;width: 5px;//background-color: #f7f7b8;height: 100%;/*border-radius: 50%;*/transform-origin: center center;}.ball_span::before {content: '';position: absolute;top: 1px;left: 0;right: 0;margin: 0 auto;height: 6px;width: 6px;border-radius: 50%;background-color: #f7f7b8;animation: shake 2s infinite;
}.ball_span::after {content: '';position: absolute;bottom: 1px;left: 0;right: 0;margin: 0 auto;height: 6px;width: 6px;border-radius: 3px;background-color: #f7f7b8;animation: shake 2s infinite;
}@keyframes shake {0% {opacity: 0.3;transform: scale(0.9);}50% {opacity: 1;transform: scale(1);}100% {opacity: 0.3;transform: scale(0.9);}
}

    .light {position: absolute;top: 0;left: 0;width: 100%;height: 100%;//background: #e0ddd1;//animation: rotate 5s linear infinite;}.box {width: 100%;height: 100%;border-radius: 50%;background-image: linear-gradient(180deg, #4d7eb5, #0a5381);}