使用纯CSS怎么实现圆点错觉的效果
发布时间:2020-09-14 11:30:40
来源:亿速云
阅读:75
作者:小新
这篇文章主要介绍使用纯CSS怎么实现圆点错觉的效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
此项目无用户自定义的 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(
to bottom,
#555 2vmin,
transp