如何用纯 CSS 创作一个雷达扫描动画
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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
如何用纯 CSS 创作一个雷达扫描动画相关推荐
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个方块旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个渐变色动画边框
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效 1
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
最新文章
- R语言plotly可视化:plotly可视化累积cumulative直方图(Cumulative Histogram)
- STM32 中malloc实际调用
- 使用oracle 游标修改数据,Oracle 函数施行修改和游标传递
- android edittext 联想,Android 输入法联想问题
- 对require和import的认识
- [基础题]2.(*)利用接口做参数,写个计算器,能完成加减乘除运算。
- Redis中的zset 有序集合
- airpods2突然变得很小声_11岁女孩胸部发育被同学取笑,穿束胸衣上课突然晕倒...
- linux小红帽实验心得,《小红帽》阅读后心得总结
- L1-068 调和平均 (10 分)-PAT 团体程序设计天梯赛 GPLT
- python 乘法内置函数_Python内置函数--reversed()
- Spring Security学习
- iis6 服务器做301跳转返回状态码200解决方法。
- recipe terminated with fatal error: spawn xelatex enoent.
- 图片去底色功能怎么用?怎么把图片背景色变成透明的?
- paypal开发整理(7)—Get Start
- 第1章 弗洛依德——精神分析
- 差分数组(简单易懂)
- 怎么取消微信送票服务器,微信抢火车票怎么取消?有什么要注意的吗?
- PyCharm自动添加作者注释
热门文章
- i5 10400f和i7 9700f哪个强
- h3c服务器管理虚拟机,02-虚拟机配置
- ios信号从4g变成无服务器,iOS12.1.2信号差无法上网怎么办?4G断流解决方法
- DC(数码相机) 产品名词解析
- 51单片机课程设计 || 基于AS608模块的指纹锁
- WebKit最新特性srcset简介(转)
- Cobalt Strike与Metasploit Framewor联动(会话传递)功能演示
- influxdb 插入数据_脚本采集数据插入到influxdb数据库里
- 修改你的mac主机名
- 前端是选择线下还是线上课程