前端学习之小火焰

这次实现了，小火焰的样式，学习了新的 animation 属性，关联 @keyframes 属性，并且在每个阶段展示的样式都不一样，以及延迟播放时间；translate 属性进行形状的变换；以及 nth-child(n) 对指定元素进行选取
参考文档：

• https://c.runoob.com/codedemo/3391/ ，各种 translate 样式
• https://www.csdn.net/tags/MtTaYg0sOTYzODQtYmxvZwO0O0OO0O0O.html，animation 动画属性
• https://www.bilibili.com/video/BV1o3411c7o4?spm_id_from=333.999.0.0&vd_source=36b18f2d7c5333a81747c014397b7f36 ，视频教程

演示地址：150.158.10.192/web/

<template>
  <div class="body">
    <div class="fire">
      <!--   火焰 -->
      <div class="flames">
        <div class="flame"></div>
        <div class="flame"></div>
        <div class="flame"></div>
        <div class="flame"></div>
      </div>
      <!--火柴-->
      <div class="logs"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Fire',
  data() {
    return {
      paths: []
    }
  }
}
</script>

<style scoped>

/*设置body的长宽和背景颜色，上面还有一层div id为app的*/
.body {
  width: 100%;
  height: 100vh;
  background-color: #27282c;
}

/*小火焰暂时位置在屏幕中间*/
.fire {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20vw;
  width: 20vw;
  background-color: #27282c;
}

/*具体 transform 的各种样式：https://c.runoob.com/codedemo/3391/ */
.flames {
  position: absolute;
  bottom: 15%;
  left: 50%;
  width: 60%;
  height: 60%;
  transform: translate(-50%,-50%) rotate(45deg); /*进行形状的改变：translate(-50%,-50%) 进行2d形状的改变， rotate(45deg)进行倾斜*/
  background-color: aqua;
}

/*定义下面4个小火苗的颜色长宽等*/
.flame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  background-color: #ffdc01;
  border-radius: 1vw; /*设置正方形变为圆角*/
}

/*设置下面的火柴*/
.logs {
  position: absolute;
  bottom: 25%;
  width: 100%;
  height: 15%;
}

/*给火柴创建了两个伪元素，设置形状以及倾斜*/
.logs::before,
.logs::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(20deg);
  height: 100%;
  width: 100%;
  border-radius: 1vw;
  background-color: #70392f;
}
/*覆盖上面创建伪元素的属性*/
.logs::before {
  transform: translate(-50%,-50%) rotate(-20deg);
  background-color: #a24332;
}

/*设置奇数的flame的动画，这里实际只给 2 3 4的flame元素设置了动画，下面又给2 3 4元素设置了动画的延迟时间*/
.flame:nth-child(2n+1) {
  animation: flameodd 1.5s ease-in infinite;
}
/*设置偶数的flame动画，具体动画实例：https://www.csdn.net/tags/MtTaYg0sOTYzODQtYmxvZwO0O0OO0O0O.html*/
.flame:nth-child(2n) {
  animation: flameoeven 1.5s ease-in infinite; /*最开始慢速：ease-in，infinite无限次播放*/
}

/*下面设置 flame属性 第 2、3、4每一个设置动画的延时播放时间，这样动画就不会同一时间播放*/
.flame:nth-child(2) {
  animation-delay: 0.375s;
}
.flame:nth-child(3) {
  animation-delay: 0.75s;
}
.flame:nth-child(4) {
  animation-delay: 1.125s;
}

/*设置两个动画分别在0 25 40 100动画所要展示样式*/
@keyframes flameodd {
  0% {
    width: 0;
    height: 0;
    background-color: #ffdc01;
    right: 0;
    bottom: 0;
  }
  25% {
    width: 100%;
    height: 100%;
    right: 1%;
    bottom: 2%;
  }
  40% {
    background-color: #ffdc01;
  }
  100% {
    width: 0;
    height: 0;
    background-color: #f73b01;
    z-index: -10;
    right: 150%;
    bottom: 170%;
  }
}
@keyframes flameoeven {
  0% {
    width: 0;
    height: 0;
    background-color: #ffdc01;
    right: 0;
    bottom: 0;
  }
  25% {
    width: 100%;
    height: 100%;
    right: 2%;
    bottom: 1%;
  }
  40% {
    background-color: #ffdc01;
  }
  100% {
    width: 0;
    height: 0;
    background-color: #a24332;
    z-index: -10;
    right: 170%;
    bottom: 150%;
  }
}

</style>