<template>
  <div class="WEffectLight" :class="{ 'am': props.am }">
    <slot></slot>
  </div>
</template>
<script setup>
import { IdGenerator } from "@/util";

//唯一标识
const uid = IdGenerator.next();

const props = defineProps({
  am: {
    type: Boolean,
    default: true
  }
})

</script>
<style lang="scss" scoped>
@layer {
  .WEffectLight {
    --key: brightness(110%);
    --time: 1.7s;
    animation: am-WEffectLight var(--time) infinite alternate-reverse;
    animation-play-state: paused;

    &.am {
      animation-play-state: running;
    }
  }


  @keyframes am-WEffectLight {
    0% {

      // filter: brightness(100%);
    }

    40% {
      filter: var(--key);
    }

    80% {

      // filter: brightness(100%);
    }
  }
}
</style>