巧用less循环加变量实现燃烧的蜡烛动画

本文参照网上的燃烧蜡烛实例，在vue-cli中使用less循环及变量实现，想学习less循环及变量使用的小伙伴可以参考一下

• 完整代码如下

<template>
  <div class="test-container">
    <div class="g-candle">
      <div class="g-body"></div>
      <div class="g-fire-box">
        <div class="g-fire">
          <div class="g-ball" v-for="item in 200" :key="item"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang='less' scoped>
.test-container{
  height: 100%;
  background: #000;
  overflow: hidden;
  .g-candle {
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .g-body {
    position: relative;
    width: 100px;
    height: 300px;
    margin: 280px auto;
    // border: 1px solid #fff;
    background: linear-gradient(230deg, #ca9800, #573903, black 70%);
    z-index: 1;
    &::before {
      position: absolute;
      content: "";
      width: 100px;
      height: 40px;
      border-radius: 50%;
      // border: 1px solid #fff;
      box-sizing: border-box;
      top: -20px;
      background: radial-gradient(#a46800, #5c3104 45%, #905602 100%);
    }
    
    &::after {
      position: absolute;
      content: "";
      width: 4px;
      height: 48px;
      background: #fff;
      left: 50%;
      top: -22px;
      transform: translate(-50%, -50%);
      border-radius: 50% 50% 0 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .8) 60%, #fff);
      opacity: .7;
      filter: blur(1px);
    }
  }

  .g-fire-box {
    position: absolute;
    top: 97px;
    left: 50%;
    width: 80px;
    height: 200px;
    transform: translate(-50%, -50%);
    filter: blur(2px) contrast(20);
  }

  .g-fire {
    position: absolute;
    top: 30px;
    left: 50%;
    border-radius: 45%;
    box-sizing: border-box;
    border: 120px solid #000;
    border-bottom: 120px solid transparent;
    transform: translate(-50%, 0) scaleX(.45);
    background-color: #761b00;
    // filter: blur(20px) contrast(30);
  }

  .g-ball {
    position: absolute;
    top: 60px;
    transform: translate(0, 0);
    background: #fa8763;
    border-radius: 50%;
    z-index: -1;
    mix-blend-mode: screen;
  }
  .loop(@count) when (@count > 0) {
    .g-ball:nth-child(@{count}){
      @width: ~`Math.random()*50+'px'`;
      width: @width;
      height: @width;
      left: calc(~`Math.random()*100-60 +'px'`);
    }
    .g-ball:nth-child(@{count}){
      animation: movetop 1s linear ~`Math.random()*3000/1000+'s'` infinite;
    }
    .loop((@count - 1))
  }
  .loop(200);
  @keyframes movetop {
    0% {
      transform: translate(0, 0);
    }
    20% {
      transform: translate(0, 0);
    }
    87.7% {
      transform: translate(0, -170px);
      opacity: 0;
    }
    100% {
      transform: translate(0, -170px);
      opacity: 0;
    }
  }
}
</style>

项目参考地址：https://codepen.io/Chokcoco/pen/jJJbmz
注意事项：

1.less中使用随机函数需要引入js: ~`js语句`
2.vue-cli需要配置vue.config.js支持less中使用js，否则会报错

css: {
    loaderOptions: {
      less: {
        lessOptions: {
          javascriptEnabled: true
        }
      }
    }
  },