HTML5+CSS3小实例：雷达扫描特效HTML5+CSS3做一个雷达扫描特效，代码不多，也不难，知识点是CSS的线性渐

HTML5+CSS3做一个雷达扫描特效，代码不多，也不难，知识点是CSS的线性渐变和径向渐变，学会这个案例，相信你对渐变会有一个新的认识。加油，学起来吧！

效果：

源码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>雷达扫描特效</title>
    <link rel="stylesheet" href="../css/31.css">
</head>

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

</html>

*{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 径向渐变背景 */
    background: radial-gradient(circle at center,#6b98bb,#000);
}
.radar{
    width: calc(256px + 48px);
    height: calc(256px + 48px);
    background: 
        /* 重复的径向渐变 圈圈 */
        repeating-radial-gradient(
            transparent 0,
            transparent 30px,
            darkcyan 30px,
            darkcyan 32px
        ),
        /* 线性渐变 中间横线 */
        linear-gradient(
            transparent 49.75%,
            darkcyan 49.75%,
            darkcyan 50.25%,
            transparent 50.25%
        ),
        /* 线性渐变 中间竖线 */
        linear-gradient(
            90deg,
            transparent 49.75%,
            darkcyan 49.75%,
            darkcyan 50.25%,
            transparent 50.25%
        ),
        /* 线性渐变 背景 */
        linear-gradient(#000,#000);
    position: relative;
    border-radius: 50%;
}
.radar::before{
    content: "";
    position: absolute;
    width: calc(256px / 2);
    height: calc(256px / 2);
    background: linear-gradient(
        45deg,
        rgba(0,0,0,0) 50%,
        rgba(0,255,255,1) 100%
    );
    border-radius: 100% 0 0 0;
    top: calc(48px / 2);
    left: calc(48px / 2);
    /* 执行动画: 动画名称 时长 线性的 无限次播放 */
    animation: scanning 5s linear infinite;
    /* 设置旋转元素的基点位置 */
    transform-origin: 100% 100%;
}

/* 定义动画 */
@keyframes scanning {
    to{
        transform: rotate(360deg);
    }
}