Css实现雷达扫描动画效果

1、html代码：

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

2、css代码：

* {box-sizing: border-box;
}
html, body {background-color: #000;
}.radar {background: -webkit-radial-gradient(center, rgba(0, 0, 0, 0.3) 50%, rgba(233, 40, 35, 0.6) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #841413 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #841413 50%, #841413 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #841413 50%, #841413 50%, rgba(32, 255, 77, 0) 50.2%);background: radial-gradient(center, rgba(0, 0, 0, 0.3) 50%, rgba(233, 40, 35, 0.6) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #841413 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #841413 50%, #841413 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #841413 50%, #841413 50%, rgba(32, 255, 77, 0) 50.2%);width: 300px;height: 300px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 50%;border: 1px solid #841413;overflow: hidden;
}
.radar:before {content: ' ';display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;
}
.radar:after {content: ' ';display: block;background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #841413 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);}
}

3、效果：

Css实现雷达扫描动画效果相关推荐

Canvas编程练习：20几行js代码实现雷达扫描动画效果
灵感源于一不小心挖了一个陈年老贴etherdream发的<[分享]魔兽技能冷却效果(希望能有更好的思路)>的坟,看他的代码太长(约200行),于是自己动手写了一个,也就20多行代码,效果也 ...
SuperMap iObjects .NET 之雷达扫描动画
作者:贤目录 1. 介绍 2. 开发环境 3. 流程设计 3.1. 核心逻辑 3.2. 整体流程 4. 代码实现 4.1. 渐变填充雷达扫描区域的扇形 4.2. 定时器刷新实现雷达动态效果 5. 总 ...
Android自定义View实现雷达扫描动画
最近在项目中有用到雷达扫描动画,这个效果也常被用于扫描或定位等事件,通过一个小Demo对此进行一下总结. 动画截图如下: Android的动画分两类:一类是Tween动画,就是对场景里的对象不断的进行 ...
用Canvas在SurfaceView上绘制一个雷达扫描动画
用Canvas在SurfaceView上绘制一个雷达扫描动画目录用Canvas在SurfaceView上绘制一个雷达扫描动画目录为什么选择SurfaceView 准备工作构建MySurfac ...
模仿新浪微博雷达搜索动画效果
模仿新浪微博雷达搜索动画效果昨天更新的了新浪微博看到个好玩的玩意,雷达搜索,功能就不介绍了,当然作为安卓开发的第一眼看到的不是功能,而是搜索界面的雷达搜索动画效果,然后思绪了一下就模仿了写了一个,当 ...
纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
CSS3实现的雷达扫描动画js特效
下载地址 CSS3实现的雷达扫描动画特效代码 dd:
uniapp小程序实现录音 uniapp小程序长按录音点击播放等功能（CSS实现语音音阶动画效果）
最近项目使用uniapp开发微信小程序,需要实现一个长按时进行语音录制,限制录制时间最大为60秒,录制完成后,可点击播放,播放时再次点击停止播放,录制完成长按实现删除功能,删除后又可重新录制(如上图所 ...
html翻牌动画效果,css实现旋转翻牌动画效果
css动画之旋转翻牌效果,具体内容如下所示: 1.我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置例子如下: .box { height: 300px; width: 300 ...

Css实现雷达扫描动画效果

Css实现雷达扫描动画效果相关推荐

最新文章

热门文章