這篇文章主要介紹使用純CSS怎么實現(xiàn)圓點錯覺的效果，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)是專業(yè)的卓資網(wǎng)站建設(shè)公司，卓資接單;提供網(wǎng)站設(shè)計、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行卓資網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

效果預(yù)覽

源代碼下載

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

代碼解讀

此項目無用戶自定義的 dom 元素，利用系統(tǒng)默認(rèn)的 元素作為容器。

定義頁面尺寸，背景設(shè)置為黑色：

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

用線性漸變畫出一橫一豎二條灰色的細(xì)線：

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;
}

為避免圓點緊貼在左側(cè)和頂部，為背景增加一點偏移量：

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;
}

現(xiàn)在，如果視線在頁面中移動，就會看到黑色小圓點，這實際上是錯覺。

以上是使用純CSS怎么實現(xiàn)圓點錯覺的效果的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！