效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接进行预览全屏显示。https://codepen.io/comehop??e/pen/JBqjqm互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cD3KwTw源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战dom元素，直接写css。设置页面空间：body{position:fixed;保证金：0；宽度：100vw；height:100vh;}使用伪元素设置背景图案：body::before{content:'';位置：固定；宽度：200vmax；高度：200vmax；背景色：钢蓝；颜色：绿松石色；背景图像：线性渐变（45deg，currentColor25%，透明25%，透明75%，currentColor75%），线性渐变（45deg，currentColor25%，透明25%，透明75%，currentColor75%）；背景位置：00,5vmax5vmax；背景尺寸：10vmax10vmax；pan背景图案：body::before{top:50%;左：50%；动画：9秒移动无限缓入缓出交替；}@keyframes移动{from{left:-40%;顶部：-40%；}至{左：-60%；顶部：-60%；}}让背景图案向上旋转：body::before{animation:9smoveinfiniteease-in-outalternate,9s-1.5秒旋转无限缓入缓出交替；}@keyframes旋转{到{变换：旋转（180度）；}}Panpage:body{top:50%;左：50%；动画：3s移动无限缓入交替；}zoompage:body{动画：3s移动无限缓入交替，3s缩放无限缓入交替；}@keyframeszoom{to{transform:scale(10);}}最后，增加变色效果：@keyframesrotating{to{transform:rotate(180deg);过滤器：色调旋转（1turn）；}}你完成了！
