电话
13363039260
如何使用纯CSS实现圆点错觉的效果
2024-01-17 11:25 小编
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
此项目无用户自定义的dom元素，利用系统默认的<body>元素作为容器。
定义页面尺寸，背景设置为黑色：
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;
}
现在，如果视线在页面中移动，就会看到黑色小圆点，这实际上是错觉。
猜你喜欢
联络方式：
13363039260
微信二维码 