根据@zhengoma 代码可见
雷达扫码效果的实现,有几个关键的知识点:

在布局上,父盒子.radar主要是伪类::before与::after实现横线与竖线,子盒子.fan使用绝对定位+transfrom的translate实现垂直居中
fan的伪类实现指针的效果,关键使用background-image的linear-gradient(线性渐变),css渐变还有radial-gradient(径向渐变).
简单说一下线性渐变background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction方向默认方向从上到下,可以使用to '方向',例如上面to right,后面参数定义颜色,至少定义两个,可多个.
上面是布局,关键动画在于transform-origin: 0% 100% + animation: rotateAnimate 2s linear infinite+ @Keyframes 中transform的rotate.
transform-origin为旋转的起点(根据布局定义这个起点),animation为动画, @Keyframes为动画的具体内容,transform它有很多属性,例如上面的translate(进行2D转换,x,y的变化),rotate为2D旋转,根据旋转起点和旋转角度,从而实现了雷达扫描的效果.

[html] 第707天 实现一个雷达扫描的动画效果 #3721

Description