如何使用CSS实现令人印象深刻的雷达截面效果？

发布时间：2023-08-05 14:27:20 所属栏目：语言来源：

导读：本文主要给大家分享用css实现炫酷的雷达扫描图效果的内容，实现效果及代码如下，这里是使用CSS3实现的，对大家学习CSS3的使用有一定的帮助，感兴趣的朋友就继续往下看吧。

直接上代码：

// index.html

<!

本文主要给大家分享用css实现炫酷的雷达扫描图效果的内容，实现效果及代码如下，这里是使用CSS3实现的，对大家学习CSS3的使用有一定的帮助，感兴趣的朋友就继续往下看吧。

直接上代码：

// index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>雷达扫描图</title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

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

</body>

</html>

//index.css

* {

    box-sizing: border-box;

}

html {

    height: 100%;

    background-color: #111;

    font-size: 10px;

}

body {

    background-image:

        linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 26%, transparent 27%,

    transparent 74%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent),

        linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%,

    rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);

    background-size: 8rem 8rem;

    width: 100%;

    height: 100%;

    position: relative;

    padding: 0;

    margin: 0;

    font-size: 1.6rem;

}

.radar {

    background:

        -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%),

        -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%,

        rgba(32, 255, 77, 0) 18.9%),

        -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%),

        -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);

    width: 75vw;

    height: 75vw;

    max-height: 75vh;

    max-width: 75vh;

    position: relative;

    left: 50%;

    top: 50%;

    /* 元素居中定位 */

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 0.2rem solid #20ff4d;

    overflow: hidden;

}

.radar:before {

    content: ' ';

    display: block;

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    animation: blips 5s infinite;

    animation-timing-function: linear;

    animation-delay: 1.4s;

}

.radar:after {

    content: ' ';

    display: block;

    background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);

    width: 50%;

    height: 50%;

    position: absolute;

    top: 0;

    left: 0;

    animation: radar-beam 5s infinite;

    /* 速度相同 */

    animation-timing-function: linear;

    transform-origin: bottom right;

    border-radius: 100% 0 0 0;

}

@keyframes radar-beam {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

@keyframes blips {

  14% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

  }

  14.0002% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%),

    radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

  }

  25% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%),

    radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%),

    radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

  }

  26% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%),

    radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%),

    radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

    opacity: 1;

  }

  100% {

    background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%),

    radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%),

    radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);

    opacity: 0;

  }

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!