前端日常实战：157#视频演示如何用纯CSS制作棋盘幻觉动画
时间：2023-04-05 23:34:33
HTML5
效果预览点击右侧“点击预览”按钮可在当前页面预览，点击链接可预览全文屏幕。https://codepen.io/comehop??e/pen/VEyoGj互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cppKmsd源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含10个子元素，每个子元素代表一行：<跨度><跨度><跨度><跨度><跨度><跨度><跨度>
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；justify-content:center;}定义容器的大小，使用vmin单位，子元素垂直排列：.container{width:100vmin;高度：100vmin；显示：弹性；flex-direction:column;}设置子元素的背景图案为间隔的黑白块，顶部有一条细线：.containerspan{width:inherit;高度：10vmin；背景：线性渐变（灰色，灰色0.5vmin，透明0.5vmin，透明），重复线性gradient(toright,black,black10vmin,transparent10vmin,transparent20vmin)}在容器底部添加一条细线：.container{border-bottom:0.5vminsolidgray;}增加动画效果，使背景奇数行向右移动半个色块的位置，移动后看起来奇数行右边宽左边窄，偶数行左边宽右边更窄。这是一种错觉：.containerspan:nth-child(odd){动画：移动5s线性无限；}@keyframes移动{0%,55%,100%{background-position:00;}5%,50%{背景位置:5vmin0;}}让偶数行的背景也移动，产生相反的方向Illusion:.containerspan:nth-child(even){animation:move5slinearinfinitereverse;}大功告成！
