51.纯 CSS 创作一个雷达扫描动画

原文地址：https://segmentfault.com/a/1190000015283286

感想：linear-gradient() 刷新了我的认知，它可以并列多个而不会被覆盖，并列使用时用 ,  分开。

文档地址：http://www.runoob.com/cssref/func-linear-gradient.html

HTML code：

<div class="radar"></div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
/* 元素页面居中 */
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 用径向渐变创建图像 http://www.runoob.com/cssref/func-radial-gradient.html */
    background: radial-gradient(circle at center,silver,black);
}
/* 设置容器的尺寸，背景颜色为黑色 */
.radar{
    position: relative;
    font-size: 32px;
    width: calc(8em + 1.5em);
    height: calc(8em + 1.5em);
    border-radius: 50%;
    /* border: 1px solid blue; */
    background: 
        /* 总体来说，linear-gradient可以利用好多次，并不覆盖！ */
        /* 画出十字坐标线 
           这里居然可以用两个linear-gradient来定义十字架 
           linear-gradient地址：http://www.runoob.com/cssref/func-linear-gradient.html
        */
        linear-gradient(
                90deg,
                transparent 49.75%,
                darkgreen 49.75%,
                darkgreen 50.25%,
                transparent 50.25%),
        linear-gradient(
                transparent 49.75%,
                darkgreen 49.75%,
                darkgreen 50.25%,
                transparent 50.25%),
        /* 在背景上画出4个同心圆 
           类似 radial-gradient()，用重复的径向渐变创建图像
           以下面设置的圆依次增加初始半径增加外圆，还设置了圆边框  
        */
        repeating-radial-gradient(
            transparent 0,
            transparent 0.95em,
            darkgreen 0.95em,
            darkgreen 1em
        ),
        linear-gradient(black,black);
}
/* 用伪元素画出总面积四分之一的正方形 */
.radar::before{
    content: '';
    width: calc(8em / 2);
    height: calc(8em / 2);
    /* border: 1px solid red; */
    border-radius: 100% 0 0 0;
    position: absolute;
    top: calc(1.5em / 2);
    left: calc(1.5em / 2);
    /* 把正方形变为有拖尾效果的扇形 */
    background: linear-gradient(
            /* 设置角度 */
            45deg,
            /* 设置颜色 前一半透明，后一半无到绿色 */
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 192, 0, 1) 100%
        );
    animation: scanning 5s linear infinite;
    /* 设置不动中心点 */
    transform-origin: 100% 100%;
}
@keyframes scanning {
    to {
        transform: rotate(360deg);
    }
}