如何用纯 CSS 创作一个雷达扫描动画

简介: 效果预览在线演示按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。https://codepen.io/comehope/pen/VdbGvr可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/VdbGvr

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cky6wfa

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,只有一个元素:

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

居中显示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, silver, black);
}

设置容器的尺寸,背景为黑色:

.radar {
    width: 8em;
    height: 8em;
    font-size: 32px;
    background: 
        linear-gradient(black, black);
}

在背景上画出 4 个同心圆:

.radar {
    background: 
            repeating-radial-gradient(
                transparent 0, 
                transparent 0.95em, 
                darkgreen 0.95em, 
                darkgreen 1em),
            linear-gradient(black, black);
}

在背景上再画出十字坐标线:

.radar {
    background: 
            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%),
            repeating-radial-gradient(
                transparent 0, 
                transparent 0.95em, 
                darkgreen 0.95em, 
                darkgreen 1em),
            linear-gradient(black, black);
}

用伪元素画出面积等于容器面积四分之一的正方形:

.radar {
    position: relative;
}

.radar::before {
    content: '';
    position: absolute;
    width: calc(8em / 2);
    height: calc(8em / 2);
}

把正方形变为有拖尾效果的扇形:

.radar::before {
    background: linear-gradient(
            45deg,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 192, 0, 1) 100%
        );
    border-radius: 100% 0 0 0;
}

把容器改为圆形:

.radar {
    border-radius: 50%;
}

为容器增加一点边距,以便清晰地展示最外侧的同心圆:

.radar {
    width: calc(8em + 1.5em);
    height: calc(8em + 1.5em);
}

.radar::before {
    top: calc(1.5em / 2);
    left: calc(1.5em / 2);
}

最后,为拖尾增加转动效果:

.radar::before {
    animation: scanning 5s linear infinite;
    transform-origin: 100% 100%;
}

@keyframes scanning {
    to {
        transform: rotate(360deg);
    }
}

大功告成!

原文地址:https://segmentfault.com/a/1190000015283286
相关文章
|
1天前
|
前端开发 开发者 异构计算
CSS进阶-CSS动画关键帧
【6月更文挑战第15天】CSS的`@keyframes`创建细腻动画,定义样式变化阶段以增强网页互动性。通过`animation`属性应用动画,如`fadeIn`示例。常见问题包括动画结束状态、卡顿和浏览器兼容性,解决办法涉及优化关键帧、使用硬件加速和添加前缀。进阶技巧包括多步骤动画和控制播放状态。例如,背景色渐变动画展示了颜色随时间变化的效果。学习和实践关键帧动画,提升Web开发技能。
|
5天前
|
前端开发 JavaScript 开发者
CSS基础-CSS3过渡与动画
【6月更文挑战第11天】本文介绍了CSS3的过渡和动画特性,用于创建平滑的视觉效果。过渡通过`transition`属性实现元素样式改变的缓动效果,常用于按钮悬停、图片切换等场景。易错点包括忘记设置初始和最终样式,以及过渡效果不明显。动画则利用`@keyframes`定义关键帧序列,适用于循环播放的图标旋转等复杂效果。动画的错误可能在于结束状态处理和无限循环的性能问题。通过代码示例和避免常见陷阱,开发者能更好地利用CSS3动画提升网页交互体验。关键在于适度使用,保持界面流畅舒适。
|
12天前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中,通过创新技巧,可以使用HTML和CSS模拟云朵漂浮和草地动画效果,提升用户体验。背景实现采用线性渐变动画,使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素,结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造,配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
20 1
纯CSS画浮动卡通蓝天白云草坪动画效果
|
16天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
24 1
|
27天前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
29 0
|
30天前
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
23 2
|
30天前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
2天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
2天前
|
缓存 前端开发 JavaScript
从HTML、CSS以及其他方面介绍一些移动端网页性能优化的策略
【6月更文挑战第14天】本文探讨了移动端网页性能优化的重要性,并提出了HTML、CSS及其他方面的优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件。CSS优化包括简化样式、利用CSS3动画、媒体查询及压缩文件。其他策略涉及图片和字体优化、缓存利用、压缩传输数据、减少HTTP请求及监听网络状态。通过这些方法,可提升网页性能,改善用户体验。
7 1
|
2天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
9 2