前端每日實戰：152# 視頻演示如何用純 CSS 創做一個圓點錯覺效果

時間 2019-11-05

標籤前端每日實戰視頻演示如何 css 一個圓點錯覺效果欄目 CSS 简体版

原文原文鏈接

效果預覽

按下右側的「點擊預覽」按鈕能夠在當前頁面預覽，點擊連接能夠全屏預覽。css

https://codepen.io/comehope/pen/gBwzKR前端

可交互視頻

此視頻是能夠交互的，你能夠隨時暫停視頻，編輯視頻中的代碼。git

請用 chrome, safari, edge 打開觀看。github

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

源代碼下載

每日前端實戰系列的所有源代碼請從 github 下載：dom

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

代碼解讀

此項目無用戶自定義的 dom 元素，利用系統默認的 <body> 元素做爲容器。3d

定義頁面尺寸，背景設置爲黑色：code

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
}

用線性漸變畫出一橫一豎二條灰色的細線：視頻

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
}

用徑向漸變在左上角畫一個白色的圓點：

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        radial-gradient(
            circle at 1vmin 1vmin,
            white 1vmin,
            transparent 1vmin
        ),
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
}

平鋪背景：

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        radial-gradient(
            circle at 1vmin 1vmin,
            white 1vmin,
            transparent 1vmin
        ),
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
    background-size: 10vmin 10vmin;
}

爲避免圓點緊貼在左側和頂部，爲背景增長一點偏移量：

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        radial-gradient(
            circle at 1vmin 1vmin,
            white 1vmin,
            transparent 1vmin
        ),
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
    background-size: 10vmin 10vmin;
    background-position: 5vmin 5vmin;
}

如今，若是視線在頁面中移動，就會看到黑色小圓點，這其實是錯覺。

大功告成！

相關標籤/搜索