【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);
    }
相关推荐
雪落满地香41 分钟前
css:圆角边框渐变色
前端·css
慈云数据2 小时前
从开发到上线:基于 Linux 云服务器的前后端分离项目部署实践(Vue + Node.js)
linux·服务器·vue.js
记得早睡~6 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
小小鸭程序员8 小时前
Vue组件化开发深度解析:Element UI与Ant Design Vue对比实践
java·vue.js·spring·ui·elementui
拉不动的猪8 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya8 小时前
react redux的学习,单个reducer
前端·javascript·react.js
陌路物是人非8 小时前
SpringBoot + Netty + Vue + WebSocket实现在线聊天
vue.js·spring boot·websocket·netty
拉不动的猪8 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
加瓦点灯8 小时前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
z_mazin9 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫