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


本文标题:怎么使用纯CSS代码实现圆点错觉的效果
文章位置:http://scyanting.com/article/gddgoh.html