vue扫描指纹动画

最新推荐文章于 2024-09-23 09:37:17 发布

Lancelot212

最新推荐文章于 2024-09-23 09:37:17 发布

阅读量256

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_73882890/article/details/140118360

版权

<script lang="ts" setup>
  import { onMounted } from 'vue'

  onMounted(() => {
     const  getsize = () => {
      var scanner = document.getElementById('scanner1')
      console.log(scanner)
      var liang = document.getElementById('liang')
      var fingarprint = document.getElementById('fingarprint1')
      var scanner_width = scanner.offsetWidth
      var scanner_height = scanner.offsetHeight
      fingarprint.style.backgroundSize = scanner_width + 'px' + ' ' + scanner_height + 'px'
      liang.style.backgroundSize = scanner_width + 'px' + ' ' + scanner_height + 'px'
    }
  getsize()
  })




</script>

<template>
    <div class="scanner">
            <div id="scanner1" style="position: relative;display: flex;justify-content: center;width: 100%;height: 100%;margin-top: 0.4rem;">
              <div id="fingarprint1" class="fingarprint" />
              <div id="liang" class="liang" />
            </div>
          </div>
</template>

<style scoped>
.scanner{
  width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
}
.fingarprint{
           position: relative;
           width:100%;
           height:100%;
           background-image: url(image/hte443_hui.png);
           background-repeat: no-repeat;
           background-size: 100% 100%;
            }
            .liang{
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-image: url(image/hte443_Artboard.png) ;
             background-repeat: no-repeat;
             background-size: 200px 320px;
             animation: animate 10s ease-in-out infinite;
              }

   @keyframes animate{
  0%,
  100%{
    height: 0%;
  }
  50%{
    height: 100%;
  }      
}   
.fingarprint:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #3fefef;
  border-radius: 8px;
  filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
  animation: animate_line 10s ease-in-out infinite;
}
@keyframes animate_line{
  0%,
  100%{
    top: 0%;
  }
  50%{
    top: 100%;
  }
}

</style>