Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use pure CSS code to achieve the effect of dot illusion. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Code interpretation

This project has no user-defined dom elements and uses the system default elements as containers.

Define the page size and set the background to black:

Body {

Margin:0

Width:100vw

Height:100vh

Background-color:black

}

Draw two thin gray lines, one horizontal and one vertical, with a linear gradient:

Body {

Margin:0

Width:100vw

Height:100vh

Background-color:black

Background-image:

Linear-gradient (

Tobottom

# 5552vmin

Transparent2vmin

),

Linear-gradient (

Toright

# 5552vmin

Transparent2vmin

)

}

Use a radial gradient to draw a white dot in the upper left corner:

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

)

}

Tile background:

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

}

To prevent the dots from clinging to the left and top, add a little offset to the background:

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

}

Now, if you move your eyes around the page, you will see small black dots, which is actually an illusion.

On "how to use pure CSS code to achieve the effect of dot illusion" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.