欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

1. 實(shí)現(xiàn)思路

實(shí)現(xiàn)思路

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

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

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

以及被掃描出的亮點(diǎn)兒。

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

HTML部分，包含頁(yè)面背景，包含多層蜘蛛王盤，包含轉(zhuǎn)動(dòng)元素，包含掃描結(jié)果，猛地一看元素非常多，但在頁(yè)面性能優(yōu)化中，HTML標(biāo)簽元素的多少，也會(huì)被評(píng)定為一個(gè)標(biāo)準(zhǔn)，所以我們只添加一個(gè)DIV元素，盡量多的都用CSS3來(lái)實(shí)現(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)盤其實(shí)可以做成多個(gè)DIV嵌套，然后分別設(shè)置其border-radius屬性為50%，然后一層比一層小即可。然后再橫向和縱向分別添加一個(gè)邊框，但這樣會(huì)造成HTML元素的增多，所以我們采用了radial-gradient背景色值的填充，而正是這一復(fù)合屬性，追加的越多，就越有效果

5. 掃描轉(zhuǎn)動(dòng)效果

掃描轉(zhuǎn)動(dòng)效果使用了我們熟知的animation 屬性，而動(dòng)畫中重點(diǎn)在于從0度一直轉(zhuǎn)動(dòng)到360度這個(gè)過(guò)程

@keyframes zhuan {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

 同時(shí)在轉(zhuǎn)動(dòng)的時(shí)候，會(huì)有一個(gè)尾巴陰影效果，隨著轉(zhuǎn)動(dòng)而轉(zhuǎn)動(dòng)

background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);

6.  被掃描到的光點(diǎn)兒

我們看這個(gè)動(dòng)畫效果，是在掃描體經(jīng)過(guò)后，才閃動(dòng)出現(xiàn)的，而且還會(huì)自動(dòng)閃爍消失，這里采用opacity屬性的動(dòng)畫來(lái)模擬閃爍過(guò)程，同時(shí)使用radial-gradient的復(fù)合背景屬性設(shè)置光點(diǎn)兒的個(gè)數(shù)，位置等

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

7. 完整源代碼

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

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>CSS3實(shí)現(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. 最后

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

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

相關(guān)文章

最新評(píng)論