前端日常实战：51#视频演示如何用纯CSS制作雷达扫描动画
时间：2023-04-04 23:01:42
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/VdbGvr互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cky6wfa源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有一个元素：
centerdisplay:body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,silver,black);}设置容器的大小，背景为黑色：.radar{width:8em;高度：8em；字体大小：32px；背景：线性渐变（黑色，黑色）；}在背景上画4个同心圆：.radar{background:repeating-radial-gradient(transparent0,transparent0.95em,darkgreen0.95em,darkgreen1em),linear-gradient(black,black);}在背景上然后画交叉坐标线：.radar{background:linear-gradient(90deg,transparent49.75%,darkgreen49.75%,darkgreen50.25%,transparent50.25%),线性渐变（透明49.75%，深绿色49.75%，深绿色50.25%，透明50.25%），重复径向渐变（透明0，透明0.95em，深绿色0.95em，深绿色1em），线性渐变（黑色，黑色；}使用伪元素绘制一个面积等于容器面积四分之一的正方形：.radar{position:relative;}.radar::before{content:'';position:absolute;width:calc(8em/2);height:calc(8em/2);}把正方形变成扇形，有拖尾效果：.radar::before{background:linear-gradient(45deg,rgba(0,0,0,0)50%,rgba(0,192,0,1)100%);border-radius:100%000;}把容器改成圆形:.radar{border-radius:50%;}增加一点边距containerforclarity清晰显示最外面的同心圆：.radar{width:calc(8em+1.5em);height:calc(8em+1.5em);}.radar::before{top:calc(1.5em/2);left:calc(1.5em/2);}最后，为轨迹添加旋转：.radar::before{动画：扫描5s线性无限；transform-origin:100%100%;}@keyframes扫描{to{transform:rotate(360deg);}}大功告成！
