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

效果图先发:

页面部分:

bash 复制代码
<div ref="round" class="round">
          <div class="light" ref="light"/>
          <div class="box"></div>
        </div>

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

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

样式部分:

(js动态部分的样式需要放在不加scope的标签中)

bash 复制代码
.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);
  }
}
bash 复制代码
    .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);
    }
相关推荐
daols884 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
尘心cx8 小时前
前端-CSS-day1
前端·css
CN-Dust8 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript