【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);
    }
相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui