前端每日实战：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;
}

如今，若是视线在页面中移动，就会看到黑色小圆点，这其实是错觉。

大功告成！