CSS3模擬實現(xiàn)一個雷達探測掃描動畫特效(最新推薦)
發(fā)布時間：2025-02-21 16:40:42 作者：經(jīng)海路大白狗 
我要評論
我要評論文章介紹了如何使用CSS3實現(xiàn)一個雷達探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,展示了CSS3的強大功能，感興趣的朋友一起看看吧
之前好長時間住在唐家?guī)X，從路口往上地走的時候，總能看見一個一個的雷達，好壯觀，今天用CSS3實現(xiàn)一個雷達探測掃描的效果。
1. 實現(xiàn)思路
實現(xiàn)思路
包含夜色背景，其實就是為了好看，也是為了真實，好像有種真實的效果；
包含蜘蛛網(wǎng)盤，又像一個靶子；
實現(xiàn)掃描體的轉(zhuǎn)動效果，而且掃描體會帶有陰影尾巴，更加真實；
以及被掃描出的亮點兒。
2. HTML部分的實現(xiàn)
HTML部分，包含頁面背景，包含多層蜘蛛王盤，包含轉(zhuǎn)動元素，包含掃描結(jié)果，猛地一看元素非常多，但在頁面性能優(yōu)化中，HTML標簽元素的多少，也會被評定為一個標準，所以我們只添加一個DIV元素，盡量多的都用CSS3來實現(xiàn)
<body> <div class="tangjialing"></div> </body>
3. 背景的效果
背景的效果為了體現(xiàn)出網(wǎng)格的狀態(tài)，采用了background-image的復合屬性，而屬性值的linear-gradient保證了橫線和縱線的展示
4. 蜘蛛網(wǎng)盤的效果
蜘蛛網(wǎng)盤其實可以做成多個DIV嵌套，然后分別設置其border-radius屬性為50%，然后一層比一層小即可。然后再橫向和縱向分別添加一個邊框，但這樣會造成HTML元素的增多，所以我們采用了radial-gradient背景色值的填充，而正是這一復合屬性，追加的越多，就越有效果
5. 掃描轉(zhuǎn)動效果
掃描轉(zhuǎn)動效果使用了我們熟知的animation 屬性，而動畫中重點在于從0度一直轉(zhuǎn)動到360度這個過程
@keyframes zhuan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}同時在轉(zhuǎn)動的時候，會有一個尾巴陰影效果，隨著轉(zhuǎn)動而轉(zhuǎn)動
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);
6. 被掃描到的光點兒
我們看這個動畫效果，是在掃描體經(jīng)過后，才閃動出現(xiàn)的，而且還會自動閃爍消失，這里采用opacity屬性的動畫來模擬閃爍過程，同時使用radial-gradient的復合背景屬性設置光點兒的個數(shù)，位置等
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
7. 完整源代碼
下面，把完整源代碼給出來，需要的小伙伴可以自行復制粘貼到自己的HTML中去哦
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3實現(xiàn)雷達掃描特效</title>
<style>
* {
box-sizing: border-box;
}
html {
height: 100%;
background-color: #380d0d;
font-size: 10px;
}
body {
background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);
background-size: 7rem 7rem;
background-position: -5.2rem -5.2rem;
width: 100%;
height: 100%;
position: relative;
padding: 0;
margin: 0;
font-size: 1.6rem;
}
.tangjialing {
background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
width: 75vw;
height: 75vw;
max-height: 75vh;
max-width: 75vh;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 0.2rem solid #0cdd36;;
overflow: hidden;
}
.tangjialing:before {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation: bei 5s infinite;
animation-timing-function: linear;
animation-delay: 1.4s;
}
.tangjialing:after {
content: ' ';
display: block;
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
animation: zhuan 5s infinite;
animation-timing-function: linear;
transform-origin: bottom right;
border-radius: 100% 0 0 0;
}
@keyframes zhuan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes bei {
14% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
14.0002% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
25% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
}
26% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 1;
}
100% {
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
opacity: 0;
}
}
</style>
</head>
<body>
<div class="tangjialing"></div>
</body></html>8. 最后
最后，希望這個雷達掃描效果，可以給你拋磚引玉，實現(xiàn)更多的需求效果。
到此這篇關于CSS3模擬實現(xiàn)一個雷達探測掃描動畫特效的文章就介紹到這了,更多相關css3雷達探測掃描動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了CSS3 實現(xiàn)雷達掃描圖的示例代碼,代碼簡單易懂對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-21- 這篇文章主要介紹了使用CSS3設計地圖上的雷達定位提示效果的實例,即文中所說的水波漣漪效果,能夠控制寬高和透明度,需要的朋友可以參考下2016-04-05
