How to use pure CSS code to realize the effect of dot illusion
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.
