前端日常实战：129#视频演示如何用纯CSS和原生JS制作条纹错觉动画
时间：2023-04-05 10:57:06
HTML5
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/qMPQPx互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cMGa4TQ源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含2个元素，分别代表2个轨道：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:#999;}定义子元素的容器大小和布局：.container{font-size:30px;宽度：计算（13em+0.5em）；高度：8em；显示：弹性；弹性方向：列；justify-content:space-between;}定义2个颜色值，一个亮，一个暗：.container{--dark:#222;--light:#ddd;}画出两条轨道的轮廓：.track{width:inherit;高度：2em；border:1pxsolidvar(--dark);}是2条轨道的背景图案，图案是明暗条纹，但是第二条轨道是半格wrong:.track{background:linear-gradient(90deg,var(--暗)50%,var(--亮)50%);background-size:1em;}.track:nth-child(2){背景und-position:0.5em;}用伪元素画2个矩形：.track{position:relative;显示：弹性；对齐项目：中心；}.track::before{内容：''；位置：绝对；宽度：2em；高度：0.8em；background-color:var(--light);}让这两个矩形在轨道上来回移动：.track::before{animation:move5slinearinfinitealternate;}@keyframesmove{from{left:0;}到{左：计算（100%-2em）；}}此时，两个矩形看似在一个接一个地前进，但实际上它们是在同一时刻开始并以相同的速度结束的。让我们揭开真相。在dom中添加一个子元素作为按钮；
告诉我真相 设置按钮的样式：.toggle{order:-1;宽度：10em；高度：2em；border:2pxsolidvar(--dark);边界半径：0.2em；字体大小：0.5em；字体系列：无衬线；字体粗细：粗体；颜色：黑色;文本对齐：居中；行高：2em；游标：指针；user-select:none;}为按钮设置类似于轨道样式的背景，以及鼠标悬停效果：.toggle{background-image:linear-gradient(toright,#ddd50%,#99950%);背景大小：1em；transition:0.5s;}.toggle:hover{background-position:5em;}添加一个脚本，当点击按钮时触发以切换轨道元素的样式：let$toggle=document.getElementsByClassName('toggle')[0]let$tracks=Array.from(document.getElementsByClassName('track'))$toggle.addEventListener('click',function(){$tracks.forEach(track=>track.classList.toggle('highlights'))})终于在切换样式后揭开了谜底：.track::before{box-sizing:border-box;边框：实心var(--dark)；border-width:0;}.track.highlights::before{背景色:白色;border-width:0.1em;}大功告成！
