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

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

创新互联建站是一家集网站设计、网站建设、网站页面设计、网站优化SEO优化为一体的专业网站设计公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。

代码解读

此项目无用户自定义的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代码实现圆点错觉的效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。