【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);
    }
相关推荐
@解忧杂货铺2 小时前
前端vue如何实现数字框中通过鼠标滚轮上下滚动增减数字
前端·javascript·vue.js
苹果酱05673 小时前
「Mysql优化大师一」mysql服务性能剖析工具
java·vue.js·spring boot·mysql·课程设计
WebDeveloper20013 小时前
如何使用美国域名中心US Domain Center和WordPress创建商业网站
运维·服务器·css·网络·html
真的很上进7 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203987 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
supermapsupport8 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
m0_748254889 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
噢,我明白了10 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__10 小时前
APIs-day2
javascript·css·css3
苹果醋310 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计