如何用CSS3写一个超厉害的指纹特效？

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

导读：今天这篇我们来学习和了解“如何用CSS3写一个炫酷的指纹特效？”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“如何用CSS3写一个炫酷的指纹特效？”有一定的帮助。有这方面学习需要

今天这篇我们来学习和了解“如何用CSS3写一个炫酷的指纹特效？”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“如何用CSS3写一个炫酷的指纹特效？”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

具体代码如下所示：

<!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>

（编辑：汽车网）

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