“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

preface

Blessed by Buddha, there is no bug. Hello everyone! I am across the sea!

This is also an effect used in a project, just want to achieve the following, the implementation process is not difficult, record.

The implementation process

  1. Flash effect, using CSS animationkeyframesIf you want to learn more, you can seeportal
  2. The flash effect refers to the time in the animation
  • At some time 1, it’s just starting to blink
  • At some point 2, the flash is much brighter than it was before
  • At some time 3, it’s at its brightest
  • At some point 4, the brightness starts to go down
  • At some point 5, the brightness drops to the beginning of the flash

The style code is as follows:

/* Firefly effects */
@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); }}Copy the code

The complete code is as follows: comglowworm.vue

<! -- * @Author: your name * @Date: 2021-11-01 09:54:49
 * @LastEditTime: 2021-11-01 09:59:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hello-world\src\components\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;
}


/* Firefly effects */
@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>
Copy the code

Same old rule, quote

<! -- * @Author: your name * @Date: 2021-10-13 15:35:06
 * @LastEditTime: 2021-11-01 10:01:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hello-world\src\views\test\index.vue
-->
<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>
Copy the code

And there you have it

(The effect halo on the GIF screenshot is not centered in the div, so it is centered in the actual code.)

Upgrade a little bit

Sometimes, there are some CSS effects that we want to control manually, for example, if I click on the div, the CSS effect will come out, and THEN I click on the div, the CSS effect will go away

Normally, what we would do is, you know, implement it in JS, get this div tag object, whether it’s an ID, whether it’s a class, you’re going to have to write JS code

However, sometimes, some style operations can be done directly through CSS

Take the flickering effect of this firefly as an example. When the mouse clicks, the effect appears, and when the mouse clicks again, the effect disappears

Implementation principle:

Using the Input tag, add an animation to the selected CSS style

<div>
    <input class="checkbox" id="checkbox" type="checkbox" />
    <label class="firefly" for="checkbox">
        <div class="abdomen"></div>
    </label>
  </div>
Copy the code
.checkbox {
    display: none;
}

.checkbox:checked~.firefly .abdomen {
  background: #27231e;
  box-shadow: inset 0 0 1.5 rem rgba(150.0.0.0.75);
  /* Animation effects are now added without writing js code */
  animation: flicker 4000ms ease infinite;
}

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

Complete code:

<! -- * @Author: your name * @Date: 2021-11-01 09:54:49
 * @LastEditTime: 2021-11-01 09:58:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hello-world\src\components\comGlowworm.vue
-->
<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.5 rem 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.5 rem 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.25 rem 0 0 0.5 rem rgba(14.10.10.0.1);
  }

  30%.70% {
    background: #fffd99;
    box-shadow: 0rem 0 8rem 1rem #fefa01, inset -0.25 rem 0 0 0.5 rem rgba(14.10.10.0.1);
  }

  50% {
    box-shadow: 0rem 0 8rem 1rem rgba(254.250.1.0.8), inset -0.25 rem 0 0 0.5 rem rgba(14.10.10.0.1); }}/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- fireflies flash effects -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /

@keyframes flicker {
  0%.100% {
    background: #fefa01;
    box-shadow: 0 0 1rem #fefa01, inset -0.25 rem 0 0 0.5 rem rgba(14.10.10.0.1);
  }

  30%.70% {
    background: #fffd99;
    box-shadow: 0rem 0 8rem 1rem #fefa01, inset -0.25 rem 0 0 0.5 rem rgba(14.10.10.0.1);
  }

  50% {
    box-shadow: 0rem 0 8rem 1rem rgba(254.250.1.0.8), inset -0.25 rem 0 0 0.5 rem rgba(14.10.10.0.1); }}</style>
Copy the code

I’m not going to thank you again.

The effect is as follows:

Now that you’ve seen this, please give me a thumbs up before you go, because your thumbs up means a lot to me