【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);
    }
相关推荐
索迪迈科技5 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
rannn_1115 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go6 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
β添砖java6 小时前
CSS3核心技术
前端·css·css3
猫头虎-前端技术7 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫7 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓7 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java7 小时前
CSS的文本样式
前端·css
前端小趴菜057 小时前
css - 滤镜
前端·css
祈祷苍天赐我java之术7 小时前
理解 CSS 浮动技术
前端·css