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

hosition 發布于2019-08-29 16:52 / 1436人閱讀

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀此項目無用戶自定義的元素，利用系統默認的元素作為容器。

效果預覽

按下右側的“點擊預覽”按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。

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

可交互視頻

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

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

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

源代碼下載

每日前端實戰系列的全部源代碼請從 github 下載：

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

代碼解讀

此項目無用戶自定義的 dom 元素，利用系統默認的元素作為容器。

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

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

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

大功告成！

GPU云服務器云服務器如何用css 如何用云服務器做一個個人網站如何用vue開發實時音視頻純CSS

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113954.html

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

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。源代碼下載每日前端實戰系列的全部源代碼請從下載代碼解讀此項目無用戶自定義的元素，利用系統默認的元素作為容器。 showImg(https://segmentfault.com/img/bVbhOAl?w=400&h=300); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https:...

marek 2019-08-02 11:38 評論0 收藏0
前端每日實戰 2018年10月至2019年6月項目匯總（共 20 個項目）

摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月至年月發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，過往項目 2018 年 9 月份項目匯總（共 26 個項目） 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（...

muddyway 2019-08-30 15:44 評論0 收藏0
前端每日實戰 2018 年 9 月份項目匯總（共 26 個項目）

摘要：過往項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份項目匯總共個項目年月份發布的項目前端每日實戰專欄每天分解一個前端項目，用視頻記錄編碼過程，再配合詳細的代碼解讀，是學習前端開發的活的參考書過往項目 2018 年 8 月份項目匯總（共 29 個項目） 2018 年 7 月份項目匯總（共 29 個項目） 2018 年 6 月份項目匯總（...

lavnFan 2019-08-29 16:54 評論0 收藏0