【vue自定义组件】萤火虫特效，一闪一闪

海的对岸
2,425 阅读3分钟

「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

前言

佛祖保佑， 永无bug。Hello 大家好！我是海的对岸！

这个也是有次项目中用到的一个效果，就想着实现以下，实现过程不难，记录一下。

实现过程

  1. 一闪一闪效果，用到了css动画keyframes,想了解更多，可以看传送门
  • 简单解释下这个css的keyframes keyframes创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式，在动画过程中，您能够多次改变这套 CSS 样式
    用@keyframes + 动画名 的方式 定义一个动画
    以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
    0% 是动画的开始时间，100% 动画的结束时间。
    推荐使用 0% 和 100%，理由为了获得最佳的浏览器支持
    还要注意的一点是：请使用动画属性来控制动画的外观，同时将定义的动画名与选择器绑定。
  1. 实现一闪一闪效果步骤，涉及到动画中的时间
  • 某个时间段1，是刚开始闪
  • 某个时间段2，闪的亮度比之前亮不少
  • 某个时间段3，达到最亮
  • 某个时间段4，亮度开始降低
  • 某个时间段5，亮度降到刚开始闪的时候

样式代码如下：

/* 萤火虫特效 */
@keyframes flicker {
    0%, 100% {
        background: #fefa01;
        box-shadow: 0 0 1rem #fefa01;
    }
    30%, 70% {
        background: #fffd99;
        box-shadow: -1rem 0 8rem 1rem #fefa01;
    }
    50% {
        box-shadow: -1rem 0 8rem 1rem rgba(254, 250, 1, 0.8);
    }
}

解释下上面的代码块

  1. 定义了一个叫flicker的动画名
  2. 这个动画在0%(动画的开始时间)的背景颜色background 和阴影box-shadow,都是#fefa01颜色，而且阴影的大小也是一个范围
  3. 在动画进行到30%的时候，背景颜色background 和阴影box-shadow，发生变化
  4. 在动画进行到50%的时候，阴影扩张到最大
  5. 因为动画是从低到高，在从高回到低,所以在动画的0%与100%，30%与70% 的阶段，背景颜色和阴影都是一样的，所以他们2个动画阶段都放在了一起。只有50%的时候，50%已经是动画的中间点了，就单独放一个。

完整代码如下： comGlowworm.vue

<template>
  <div class="Css_PM_Mark_Img" ></div>
</template>

<style scope>
.Css_PM_Mark_Img{
width: 22px;
height: 22px;
border-radius: 11px;
animation: flicker 4000ms ease infinite;
}


/* 萤火虫特效 */
@keyframes flicker {
    0%, 100% {
        background: #fefa01;
        box-shadow: 0 0 1rem #fefa01;
    }
    30%, 70% {
        background: #fffd99;
        box-shadow: -1rem 0 8rem 1rem #fefa01;
    }
    50% {
        box-shadow: -1rem 0 8rem 1rem rgba(254, 250, 1, 0.8);
    }
}
</style>

老规矩，引用一下

<template>
  <div class="index">
    <module/>
  </div>
</template>

<script>
import module from './../../components/comGlowworm2'
export default {
  name: 'test',
  components: {
    module,
  },
  data() {
    return {
    }
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style scope>
.index{
  background-color: rgba(3, 22, 37, 0.85);
  padding-left: 60px;
  height: 600px;
  padding-top: 60px;
}
</style>

这样，效果就有了

glowworm.gif

(gif截屏上的效果光晕不在这个div正中央，实际跑代码的时候，实在正中央的)

稍微升级一下下

有时候，一些css的效果，我们希望能手动控制下，比如，我鼠标点击下这个div,它的css效果就出来了，我再点击一下，这个效果就不见了

常态下，我们的做法，大概是，用js实现，获取这个div标签的对象,通过id也好，通过class也好，总归是要写js代码的

但是，有的时候，一些样式的操作，我们是可以通过css直接搞定的

以这个萤火虫的闪烁特效为例，讲下鼠标点击出现特效，鼠标再点击，特效消失

实现原理：

用好input标签，自带选中css样式，在这个选中css样式中添加动画效果\

(主要看这个check选中 与 取消选中时 的 闪烁效果，而check自身的样式，不是本次的重点，大家就将就的看啦)

<div>
    <input class="checkbox" id="checkbox" type="checkbox" />
    <label class="firefly" for="checkbox">
        <div class="abdomen"></div>
    </label>
  </div>

.checkbox {
    display: none;
}

.checkbox:checked~.firefly .abdomen {
  background: #27231e;
  box-shadow: inset 0 0 1.5rem rgba(150, 0, 0, 0.75);
  /* 动画效果 就这样加进来了，还不用写js代码 */
  animation: flicker 4000ms ease infinite;
}

.abdomen {
  background: #27231e;
  width: 200px;
  height: 200px;
}

完整代码：

<template>
  <div>
    <input class="checkbox" id="checkbox" type="checkbox" />
    <label class="firefly" for="checkbox">
        <div class="abdomen"></div>
    </label>

    <input class="checkbox2" id="checkbox2" type="checkbox" />
    <label class="firefly2" for="checkbox2">
        <div class="abdomen2"></div>
    </label>
  </div>
</template>

<style scope>
.checkbox {
    display: none;
}
.checkbox:checked~.firefly .abdomen {
  background: #27231e;
  box-shadow: inset 0 0 1.5rem rgba(150, 0, 0, 0.75);
  animation: flicker 4000ms ease infinite;
}
.abdomen {
  background: #27231e;
  width: 200px;
  height: 200px;
}

.checkbox2 {
    display: none;
}
.checkbox2:checked~.firefly2 .abdomen2 {
  background: #27231e;
  box-shadow: inset 0 0 1.5rem rgba(150, 0, 0, 0.75);
  animation: flicker2 4000ms ease infinite;
}
.abdomen2 {
  background: #27231e;
  width: 200px;
  height: 200px;
  margin-top: 50px;
}

@keyframes flicker2 {
  0%,100% {
    background: #fefa01;
    box-shadow: 0 0 1rem #fefa01, inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
  30%,70% {
    background: #fffd99;
    box-shadow: 0rem 0 8rem 1rem #fefa01, inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
  50% {
    box-shadow: 0rem 0 8rem 1rem rgba(254, 250, 1, 0.8), inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
}

/* ------------------ 萤火虫闪烁特效 ----------------------- */

@keyframes flicker {
  0%,100% {
    background: #fefa01;
    box-shadow: 0 0 1rem #fefa01, inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
  30%,70% {
    background: #fffd99;
    box-shadow: 0rem 0 8rem 1rem #fefa01, inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
  50% {
    box-shadow: 0rem 0 8rem 1rem rgba(254, 250, 1, 0.8), inset -0.25rem 0 0 0.5rem rgba(14, 10, 10, 0.1);
  }
}
</style>

引用方式同上方，这里就不多谢一遍了。

效果如下：

glowworm2.gif

都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要

avatar
文章
阅读
粉丝