前端每日實(shí)戰(zhàn)：51# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)雷達(dá)掃描動(dòng)畫(huà)

Youngdze 發(fā)布于2019-08-30 15:53 / 2904人閱讀

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/VdbGvr

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開(kāi)觀看。

https://scrimba.com/p/pEgDAM/cky6wfa

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，只有一個(gè)元素：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, silver, black);
}

設(shè)置容器的尺寸，背景為黑色：

.radar {
    width: 8em;
    height: 8em;
    font-size: 32px;
    background: 
        linear-gradient(black, black);
}

在背景上畫(huà)出 4 個(gè)同心圓：

.radar {
    background: 
            repeating-radial-gradient(
                transparent 0, 
                transparent 0.95em, 
                darkgreen 0.95em, 
                darkgreen 1em),
            linear-gradient(black, black);
}

在背景上再畫(huà)出十字坐標(biāo)線：

.radar {
    background: 
            linear-gradient(
                90deg,
                transparent 49.75%,
                darkgreen 49.75%,
                darkgreen 50.25%,
                transparent 50.25%),
            linear-gradient(
                transparent 49.75%,
                darkgreen 49.75%,
                darkgreen 50.25%,
                transparent 50.25%),
            repeating-radial-gradient(
                transparent 0, 
                transparent 0.95em, 
                darkgreen 0.95em, 
                darkgreen 1em),
            linear-gradient(black, black);
}

用偽元素畫(huà)出面積等于容器面積四分之一的正方形：

.radar {
    position: relative;
}

.radar::before {
    content: "";
    position: absolute;
    width: calc(8em / 2);
    height: calc(8em / 2);
}

把正方形變?yōu)橛型衔残Ч纳刃危?/p>

.radar::before {
    background: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 192, 0, 1) 100%
        );
    border-radius: 100% 0 0 0;
}

把容器改為圓形：

.radar {
    border-radius: 50%;
}

為容器增加一點(diǎn)邊距，以便清晰地展示最外側(cè)的同心圓：

.radar {
    width: calc(8em + 1.5em);
    height: calc(8em + 1.5em);
}

.radar::before {
    top: calc(1.5em / 2);
    left: calc(1.5em / 2);
}

最后，為拖尾增加轉(zhuǎn)動(dòng)效果：

.radar::before {
    animation: scanning 5s linear infinite;
    transform-origin: 100% 100%;
}

@keyframes scanning {
    to {
        transform: rotate(360deg);
    }
}

大功告成！

GPU云服務(wù)器云服務(wù)器如何用css 如何用云服務(wù)器做一個(gè)個(gè)人網(wǎng)站如何用vue開(kāi)發(fā)實(shí)時(shí)音視頻雷達(dá)掃描效果

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/116716.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Youngdze

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

企業(yè)不再“迷信”低代碼

閱讀 1796·2021-11-24 10:18
易探云：雙11活動(dòng)，香港/美國(guó)CN2;2核4G3M、4核8G5M云服務(wù)器推薦

閱讀 2310·2021-11-18 13:20
Hostodo：$12/年KVM-256MB/15GB/500GB/斯波坎(華盛頓州)

閱讀 2402·2021-08-23 09:46
重新認(rèn)識(shí)caniuse

閱讀 1082·2019-08-30 15:56
前端每日實(shí)戰(zhàn)：51# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)雷達(dá)掃描動(dòng)畫(huà)

閱讀 2905·2019-08-30 15:53
CSSModules

閱讀 816·2019-08-30 14:22
JS基礎(chǔ)入門(mén)篇（十五）—數(shù)組去重

閱讀 542·2019-08-29 15:34
常見(jiàn)BUG解決

閱讀 2593·2019-08-29 12:14

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

前端每日實(shí)戰(zhàn)：51# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)雷達(dá)掃描動(dòng)畫(huà)

相關(guān)文章