CSS样式实现雷达扫描动效

今天前端实习工作要写一个雷达扫描的效果（如图），对css动效实现很不熟悉，所以记录一下这次的实现。

index.js文件中的div嵌套关系：
container->radar->fan

          <div className={styles.box2__window__container}><div className={styles.box2__window__container__radar}><div className={styles.box2__window__container__fan}></div></div></div>

radar类DIV是300px的宽高，fan类DIV是150px的宽高。

fan的实现运用到了CSS里面的斜切screw，运用以后可以让fan的渐变效果更加自然。
类似transform-origin旋转点等也可以在网站上在线调节查看效果。

style.less文件样式：

    &__container {overflow: hidden;position: relative;top: 200px;left: 300px;width: 300px;height: 300px;// border: 1px solid #f00;&__radar {overflow: hidden;position: relative;margin: 0px;width: 300px;height: 300px;border-radius: 50%;opacity: 0.6;background: #7bcbeb;box-sizing: border-box;}// &__radar::before {//   width: 150px;//   height: 300px;//   content: '';//   display: block;//   position: absolute;//   right: 0;//   top: 0;//   box-sizing: border-box;//   // border-left: 1px solid #5ef2ff;// }// &__radar::after {//   width: 300px;//   height: 150px;//   content: '';//   display: block;//   box-sizing: border-box;//   border-bottom: 1px solid #5ef2ff;// }// &__fan {//   position: absolute;//   top: 50%;//   left: 50%;//   transform: translate(-50%, -50%);//   border-radius: 50%;//   box-sizing: border-box;//   // border: 1px solid #fff;//   width: 150px;//   height: 150px;// }&__fan::after {content: "";width: 150px;height: 150px;display: block;box-sizing: border-box;position: relative;top: -50%;right: -50%;transform-origin: 0% 100%;border-bottom: 6px solid transparent;border-image: linear-gradient(to right, transparent, #ff9100);border-image-slice: 5;background: transparent;background-image: linear-gradient(to right, transparent, #ffa42d);animation: rotateAnimate 2s linear infinite;}@keyframes rotateAnimate {from {transform: rotate(0deg) skew(-10deg)}to {transform: rotate(360deg) skew(-10deg)}}}

CSS样式实现雷达扫描动效相关推荐

css动画——语音播报小喇叭动效
css动画--语音播报小喇叭动效根据最近的业务需求,需要做一个类似语音播报的小喇叭播报动效,本着强大的开发与学习精神,放弃了采用图片或gif的形式,最后参考了几篇文章,不得不说有了css3,现实一些 ...
酷炫纯CSS代码实现时空穿梭动效
效果展示: 使用场景,可以用于大数据大屏背景,或者是穿越动画的过渡,下载地址在文章末尾项目目录结构: html部分: <!doctype html> <html> & ...
干货分享|纯CSS绘制电池充电水波纹动效(uni-app|view组件版)
前言依托于CSS3提供的强大功能,我们可以充分发挥自己的想象力,制作出许多非常惊艳的动效,比如:接下来我要跟大家分享的一个完全用CSS绘制出来的电池充电水波纹动效,还是老规矩,小凡我依然分享的是un ...
CSS 实现按钮点击动效的套路
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群在 Web 中,大部分按钮可能都是平平无奇的,有时候为了强调品牌特殊或者满足特殊功能,可能需 ...
如何用纯 CSS 创作一个雷达扫描动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VdbGvr 可交互视频 ...
干货分享|巧用CSS滤镜绘制安卓手机充电动效(uni-app|view组件版)
前言 CSS3的滤镜真的是一个非常强大的功能,如果我们能够很好的利用它,并充分发挥我们的想象力,想要制作出非常惊艳的动效也是没有问题的哦.比如:接下来我要跟大家分享的一个巧妙使用CSS滤镜绘制出来的a ...
程序员必备狂拽炫酷吊炸天的动效神器
安利一波CSS.JS炫酷动效在线下载网站 # bttn.css 专注分享网页按钮的样式库 # Hover-Buttons 一个可以生成代码的网站 # granim.js 基于canvas的背景颜色渐变 ...
如何选取合适的前端动效方案？
一.原因前端动画场景需求多对众多动画场景的技术实现方案选择上比较模糊各动画方案的优劣及适用场景认识模糊现有动画库太多,不知道选哪个主流动画库的适用场景认识模糊二.分类动画用途展示型的动 ...
详细解析：uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...

CSS样式实现雷达扫描动效

CSS样式实现雷达扫描动效相关推荐

最新文章

热门文章