- 所在位置：
- 首頁 >
- 編程技術(shù) >
- CSS/HTML >
- 如何用CSS3寫一個炫酷的指紋特效？
如何用CSS3寫一個炫酷的指紋特效？
Admin 2022-11-02 群英技術(shù)資訊 946 次瀏覽
今天這篇我們來學(xué)習(xí)和了解“如何用CSS3寫一個炫酷的指紋特效？”，下文的講解詳細(xì)，步驟過程清晰，對大家進(jìn)一步學(xué)習(xí)和理解“如何用CSS3寫一個炫酷的指紋特效？”有一定的幫助。有這方面學(xué)習(xí)需要的朋友就繼續(xù)往下看吧！具體代碼如下所示：
<!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>
效果圖：
到此這篇關(guān)于“如何用CSS3寫一個炫酷的指紋特效？”的文章就介紹到這了,更多相關(guān)內(nèi)容請搜索群英網(wǎng)絡(luò)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持群英網(wǎng)絡(luò)！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：[email protected]進(jìn)行舉報，并提供相關(guān)證據(jù)，查實之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。
猜你喜歡
-
新手入門哪些CSS代碼基礎(chǔ)規(guī)范要了解
縮進(jìn)用四個空格。在每個聲明塊的左花括號之前添加一個空格。聲明塊的右花括號應(yīng)單獨設(shè)置。每個聲明語句：之后插入一個空格，前面沒有空格。所有的聲明句子都以分號結(jié)束，不能省略不寫。
- CSS三角形效果的實現(xiàn)及在布局的應(yīng)用是怎樣
-
常用的CSS按鈕樣式有哪些，實現(xiàn)代碼是什么
先讓我們來看看這些經(jīng)常會出現(xiàn)的按鈕形狀：矩形與圓角按鈕正常而言，我們遇到的按鈕就這兩種 -- 矩形和圓角：它們非常的簡單，寬高和圓角和背景色。 <div class='btn rect&#
-
用HTML5實現(xiàn)拖拽懸浮圖標(biāo)的代碼是什么
這篇文章主要介紹了html5實現(xiàn)可拖拽移動的懸浮圖標(biāo)的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
-
css背景顏色漸變有哪些效果？教你10個技巧
我們想要實現(xiàn)背景顏色漸變的效果是直接可以使用CSS實現(xiàn)的，不用再做圖，那么css背景顏色漸變都可以實現(xiàn)哪些效果呢？接下來給大家分享10個實現(xiàn)css背景顏色漸變的技巧，感興趣的朋友就繼續(xù)往下看吧。
推薦內(nèi)容
- CSS中flex布局如何實現(xiàn)自動換行？
- 在HTML中如何讓button居中，有幾種方法
- JS中怎樣刪除數(shù)組末尾元素？教你兩種方法
- vue怎樣獲取url參數(shù)?教你兩種方法
- 如何用Python計算BMI指數(shù)？一文帶你看懂
- python怎樣獲取數(shù)組元素的下標(biāo)？教你三種方法
- python中的ord函數(shù)有什么用？用法是什么？
- Python中array與list轉(zhuǎn)換如何做，方法是什么
- 在CSS中怎么實現(xiàn)一條橫線，方法是什么
- Python怎樣設(shè)計串口之間通信的程序
- phpstorm怎么使用和操作？一文帶你快速了解
- vue怎么給對象數(shù)組賦值？this.$set方法幫你解決
成為群英會員,開啟智能安全云計算之旅
立即注冊友鏈合作 群英網(wǎng)絡(luò) 智帝云 主機(jī)評測 idc公司 商城系統(tǒng) 跨境電商 主機(jī)吧 酷庫博客 OA系統(tǒng) 騰訊企業(yè)郵箱 銳成信息 sdwan
關(guān)注或聯(lián)系群英網(wǎng)絡(luò)
7x24小時售前：400-678-4567
7x24小時售后：0668-2555666
24小時QQ客服
群英微信公眾號
CNNIC域名投訴舉報處理平臺
服務(wù)電話：010-58813000
服務(wù)郵箱：[email protected]
投訴與建議：0668-2555555
Copyright ? QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版權(quán)所有
增值電信經(jīng)營許可證 : B1.B2-20140078 ICP核準(zhǔn)（ICP備案）粵ICP備09006778號 域名注冊商資質(zhì) 粵 D3.1-20240008
