文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS3如何实现雷达扫描图

2023-06-08 03:03

关注

这篇文章给大家分享的是有关CSS3如何实现雷达扫描图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

通过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;  }}

感谢各位的阅读!关于“CSS3如何实现雷达扫描图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯