前端每日实战：152# 视频演示如何用纯 CSS 创作一个圆点错觉效果
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。
https://codepen.io/comehope/pen/gBwzKR
可交互视频
此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/ca82VAM
源代码下载
每日前端实战系列的全部源代码请从 github 下载：
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;
}现在，如果视线在页面中移动，就会看到黑色小圆点，这实际上是错觉。
大功告成！
前端每日实战：152# 视频演示如何用纯 CSS 创作一个圆点错觉效果的更多相关文章
- 前端每日实战：157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画（实际上每一行都是平行的）
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战：99# 视频演示如何用纯 CSS 创作一个过山车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KBxYZg/ 可交互视频 此视频是 ...
- 前端每日实战：158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战：122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战：156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
- 前端每日实战：25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教程 此视频 ...
- 前端每日实战：30# 视频演示如何用纯 CSS 创作一个晃动的公告板
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wjZoGV 可交互视频教程 此视频 ...
- 前端每日实战：45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 前端每日实战：86# 视频演示如何用纯 CSS 创作一个方块旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 此视频是可 ...
随机推荐
- 二十七、rsync同步工具
1.什么是rsync? Rsync是一款开源的.快速的,多功能的,可实现全量及增量的本地或者远程数据同步备份的优秀工具.windows和linux都可以. 官网:http:www.samba.org/ ...
- 二十三、NFS企业级优化
nfs内核优化:(对于本地文件系统也是有效的) [root@nfsserve ~]# cat /proc/sys/net/core/rmem_default(该文件指定了接收套接字缓冲区大小的缺省值) ...
- day18-5个内置方法
# 1. __str__方法: 必须return class Goods: def __str__(self): return 'apple' g = Goods() print(g) #apple, ...
- RDD(三)——transformation_value类型
map(func) 返回一个新的RDD,该RDD由每一个输入元素经过func函数转换后组成.有多少个元素,func就被执行多少次. mapPartitions(func) 类似于map,但是,map函 ...
- LinkedList源码剖析
LinkedList简介 LinkedList是基于双向循环链表(从源码中可以很容易看出)实现的,除了可以当做链表来操作外,它还可以当做栈.队列和双端队列来使用. LinkedList同样是非线程安全 ...
- MOOC（15）- 接口异常处理
首先通过fiddler拿到正确的传参 把value复制下来,存到json数据中,传参时通过键去json的值即可 但是运行请求的时候报错了 再运行,还是出错 查看fiddler结果 修改,从fiddle ...
- VS2010 常用的快捷键
1.强迫智能感知:Ctrl+J:2.强迫智能感知显示参数信息:Ctrl-Shift-空格:3.格式化整个块:Ctrl+K+F4.检查括号匹配(在左右括号间切换): Ctrl +]5.选中从光标起到行首 ...
- 数字签名和数字证书等openssl加密基本术语
openssl 算法基础 1.1 对称算法 : 密钥相同,加密解密使用同一密钥 1.2 摘要算法:无论用户输入的数据什么长度,输出的都是固定长度的密文:即信息摘要,可用于判断数据的完整性:目前常用的有 ...
- MySQL 之全文索引
最近在复习数据库索引部分,看到了 fulltext,也即全文索引,虽然全文索引在平时的业务中用到的不多,但是感觉它有点儿意思,所以花了点时间研究一下,特此记录. 引入概念通过数值比较.范围过滤等就可以 ...
- h-index|IF|Good story|IPS
科研论文写作 科研论文写作的关键在于写出研究的重要性. 对科研工作者的评价标准主要以论文为主,可以从论文的定性和定量角度评价.论文的外部评价,包括科学院分区(包括123类):影响因子IF,可以通过we ...