怎么使用纯CSS代码实现圆点错觉的效果

这篇文章将为大家详细讲解有关怎么使用纯CSS代码实现圆点错觉的效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　代码解读

　　此项目无用户自定义的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(

　　tobottom,

　　#5552vmin,

　　transparent2vmin

　　),

　　linear-gradient(

　　toright,

　　#5552vmin,

　　transparent2vmin

　　);

　　}

　　用径向渐变在左上角画一个白色的圆点：

　　body{

　　margin:0;

　　width:100vw;

　　height:100vh;

　　background-color:black;

　　background-image:

　　radial-gradient(

　　circleat1vmin1vmin,

　　white1vmin,

　　transparent1vmin

　　),

　　linear-gradient(

　　tobottom,

　　#5552vmin,

　　transparent2vmin

　　),

　　linear-gradient(

　　toright,

　　#5552vmin,

　　transparent2vmin

　　);

　　}

　　平铺背景：

　　body{

　　margin:0;

　　width:100vw;

　　height:100vh;

　　background-color:black;

　　background-image:

　　radial-gradient(

　　circleat1vmin1vmin,

　　white1vmin,

　　transparent1vmin

　　),

　　linear-gradient(

　　tobottom,

　　#5552vmin,

　　transparent2vmin

　　),

　　linear-gradient(

　　toright,

　　#5552vmin,

　　transparent2vmin

　　);

　　background-size:10vmin10vmin;

　　}

　　为避免圆点紧贴在左侧和顶部，为背景增加一点偏移量：

　　body{

　　margin:0;

　　width:100vw;

　　height:100vh;

　　background-color:black;

　　background-image:

　　radial-gradient(

　　circleat1vmin1vmin,

　　white1vmin,

　　transparent1vmin

　　),

　　linear-gradient(

　　tobottom,

　　#5552vmin,

　　transparent2vmin

　　),

　　linear-gradient(

　　toright,

　　#5552vmin,

　　transparent2vmin

　　);

　　background-size:10vmin10vmin;

　　background-position:5vmin5vmin;

　　}

　　现在，如果视线在页面中移动，就会看到黑色小圆点，这实际上是错觉。

关于"怎么使用纯CSS代码实现圆点错觉的效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。