您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍使用纯CSS怎么实现圆点错觉的效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
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( to bottom, #555 2vmin, transparent 2vmin ), linear-gradient( to right, #555 2vmin, transparent 2vmin ); }
用径向渐变在左上角画一个白色的圆点:
body { margin: 0; width: 100vw; height: 100vh; background-color: black; background-image: radial-gradient( circle at 1vmin 1vmin, white 1vmin, transparent 1vmin ), linear-gradient( to bottom, #555 2vmin, transparent 2vmin ), linear-gradient( to right, #555 2vmin, transparent 2vmin ); }
平铺背景:
body { margin: 0; width: 100vw; height: 100vh; background-color: black; background-image: radial-gradient( circle at 1vmin 1vmin, white 1vmin, transparent 1vmin ), linear-gradient( to bottom, #555 2vmin, transparent 2vmin ), linear-gradient( to right, #555 2vmin, transparent 2vmin ); background-size: 10vmin 10vmin; }
为避免圆点紧贴在左侧和顶部,为背景增加一点偏移量:
body { margin: 0; width: 100vw; height: 100vh; background-color: black; background-image: radial-gradient( circle at 1vmin 1vmin, white 1vmin, transparent 1vmin ), linear-gradient( to bottom, #555 2vmin, transparent 2vmin ), linear-gradient( to right, #555 2vmin, transparent 2vmin ); background-size: 10vmin 10vmin; background-position: 5vmin 5vmin; }
现在,如果视线在页面中移动,就会看到黑色小圆点,这实际上是错觉。
以上是使用纯CSS怎么实现圆点错觉的效果的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。