亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS3模擬實現(xiàn)一個雷達(dá)探測掃描動畫特效(最新推薦)

  發(fā)布時間：2025-02-21 16:40:42   作者：經(jīng)海路大白狗   我要評論
文章介紹了如何使用CSS3實現(xiàn)一個雷達(dá)探測掃描的效果,包括夜色背景、蜘蛛網(wǎng)盤、掃描體的轉(zhuǎn)動效果、尾巴陰影以及被掃描到的光點,通過HTML和CSS的配合,實現(xiàn)了豐富的動畫效果,展示了CSS3的強大功能，感興趣的朋友一起看看吧

之前好長時間住在唐家?guī)X，從路口往上地走的時候，總能看見一個一個的雷達(dá)，好壯觀，今天用CSS3實現(xiàn)一個雷達(dá)探測掃描的效果。

1. 實現(xiàn)思路

實現(xiàn)思路

包含夜色背景，其實就是為了好看，也是為了真實，好像有種真實的效果；

包含蜘蛛網(wǎng)盤，又像一個靶子；

實現(xiàn)掃描體的轉(zhuǎn)動效果，而且掃描體會帶有陰影尾巴，更加真實；

以及被掃描出的亮點兒。

2. HTML部分的實現(xiàn)

HTML部分，包含頁面背景，包含多層蜘蛛王盤，包含轉(zhuǎn)動元素，包含掃描結(jié)果，猛地一看元素非常多，但在頁面性能優(yōu)化中，HTML標(biāo)簽元素的多少，也會被評定為一個標(biāo)準(zhǔn)，所以我們只添加一個DIV元素，盡量多的都用CSS3來實現(xiàn)

<body>
<div class="tangjialing"></div>
</body>

3. 背景的效果

背景的效果為了體現(xiàn)出網(wǎng)格的狀態(tài)，采用了background-image的復(fù)合屬性，而屬性值的linear-gradient保證了橫線和縱線的展示

4.  蜘蛛網(wǎng)盤的效果

蜘蛛網(wǎng)盤其實可以做成多個DIV嵌套，然后分別設(shè)置其border-radius屬性為50%，然后一層比一層小即可。然后再橫向和縱向分別添加一個邊框，但這樣會造成HTML元素的增多，所以我們采用了radial-gradient背景色值的填充，而正是這一復(fù)合屬性，追加的越多，就越有效果

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的復(fù)合背景屬性設(shè)置光點兒的個數(shù)，位置等

background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

7. 完整源代碼

下面，把完整源代碼給出來，需要的小伙伴可以自行復(fù)制粘貼到自己的HTML中去哦

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>CSS3實現(xiàn)雷達(dá)掃描特效</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. 最后

最后，希望這個雷達(dá)掃描效果，可以給你拋磚引玉，實現(xiàn)更多的需求效果。

到此這篇關(guān)于CSS3模擬實現(xiàn)一個雷達(dá)探測掃描動畫特效的文章就介紹到這了,更多相關(guān)css3雷達(dá)探測掃描動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論