利用CSS实现指纹特效的示例代码

发布时间：2023-10-07 09:55:27 所属栏目：语言来源：

导读：这篇文章主要讲解了“用CSS实现指纹特效的具体代码是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起

这篇文章主要讲解了“用CSS实现指纹特效的具体代码是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

具体代码如下所示：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           *{
               margin: 0;
               padding: 0;
               box-sizing: border-box;
               font-family: "calisto mt";
           }
           body{
               display: flex;
               justify-content: center;
               align-items: center;
               min-height: 100vh;
               background: #111;
           }
           .scan{
               position: relative;
               display: flex;
               flex-direction: column;
               align-items: center;
           }
           .scan .fingerprint{
               position: relative;
               width: 200px;
               height: 280px;
               background: url(img/finger0.png) no-repeat;
               background-size: 100%;

           }
           .scan .fingerprint::before{
               content: ';
               position: absolute;
top:0;
               left: 0;
               height: 100%;
               width: 100%;
               background: url(img/finger2.png) no-repeat;
               background-size: 100%;
               animation: animate 4s ease-in-out infinite;
           }
           .scan .fingerprint::after{
               content: ';
               position: absolute;
           top:0;
               left: 0;
               height: 8px;
               width: 100%;
               margin-top: -30px;
               background: #3fefef;
               border-radius: 8px;
               filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
               animation: animate_line 4s ease-in-out infinite;
           }
           @keyframes animate_line{
               0%,100%{
                   top: 0;
               }
               50%{
                   top: 100%;
               }
           }
           @keyframes animate{
               0%,100%{
                   opacity: 0;
               }
               50%{
                   opacity: 1;
               }
           }
           .scan h3{
               text-transform: unset;
               font-size: 2em;
               letter-spacing: 2px;
               margin-top: 20px;
               color: #3FEFEF;
               filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
               animation: animate_txt 4s ease-in-out infinite;
           }
           @keyframes animate_txt{
               0%,100%{
                   opacity: 0;
               }
               50%{
                   opacity: 1;
               }
           }
       </style>
   </head>
   <body>
       <div class="scan">
           <div class="fingerprint"></div>
           <h3>Scanning...</h3>
       </div>
   </body>
</html>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!