使用css实现扫描效果

实现下图中的扫描效果

需求分析

1.扫描图层有一个宽度为0增加到固定宽度的过程，之后再开始移动
2.到达一边时，扫描图层逐渐消失，之后再调转方向
3.扫描图层两侧为一个梯形

实现方案

1. 首先使用clip-path将div切出容器形状

让ui切一张大小一样的纯色svg，一定要是纯色，不带边框阴影等各种效果的svg,这样可以快速得到容器尺寸，下图便是我们ui切出来的svg

可以看到容器尺寸有了，但是很不方便计算，原因在于存在一个translate ,写个方法处理一下（慕客下载的svg都存在这个毛病，下面自己处理下数据，有更好方法的话，请留言告知）

// svg文件中取出polygon中取出translate
let polygon = '54 441 43.000824 451.999176 43.000824 492 54.0012817 503.000458 158 503.000458 169 492 169 452 158 441'
let translate = [-43.000000, -441.000000]polygon = handler(polygon, translate)
console.log(polygonStr)
//11px 0, 0 11px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0,function handler(str, origin) {let arr = str.split(' ')arr = arr.map((item, index) => {if (index % 2 === 0) {item = +item + origin[0]}else {item = +item + origin[1]}item = Math.round(item)if (item !== 0) {item += 'px'}if (index % 2 !== 0) {item += ','}return item})return arr.join(' ')
}

现在我们来复现容器，通过上一步计算出的polygon,知道容器的高宽为62，126

<!DOCTYPE html>
<html lang="en">
<head><style>div {width:126px;height:62px;clip-path: polygon(11px 0, 0 11px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0);background: linear-gradient(270deg, #00b1ff, rgba(0, 177, 255, 0))}</style>
</head>
<body>
<div></div>
</body>
</html>

实现的容器效果如下

2. 实现动画效果

这一步采用两个background过渡的方式来实现
主要利用background的position与size属性，动画设计部分见代码，完整代码如下

<!DOCTYPE html>
<html lang="en">
<head><style>div {width: 126px;height: 62px;position: relative;background: gray;clip-path: polygon(11px 0, 0 10px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0);}div:after {content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;clip-path: polygon(11px 0, 0 10px, 0 51px, 11px 62px, 115px 62px, 126px 51px, 126px 11px, 115px 0);background: linear-gradient(270deg, #00b1ff, rgba(0, 177, 255, 0)),linear-gradient(90deg, #00b1ff, rgba(0, 177, 255, 0));background-size: 0, 0;background-position: 0, 100%;background-repeat: no-repeat;animation: scanAnimation 10s infinite linear;}@keyframes scanAnimation {/*状态1：bg1与bg2均不可见*/0% {background-size: 0, 0;background-position: 0, 100%;}/*状态2：bg1宽度从0到30%，bg2不可见*/10% {background-size: 30%, 0;background-position: 0, 100%;}/*状态3：bg1宽度保持30%不变，位置从0到130%，即位置从可见变为不可见，bg2不可见*/50% {background-size: 30%, 0;background-position: 130%, 100%;}/*状态4：bg1保持不可见，bg2宽度从0到30%，*/60% {background-size: 30%, 30%;background-position: 130%, 100%;}/*状态5：bg1保持不可见，bg2宽度保持30%不变，位置从100%到-30%，变为不可见*/100% {background-size: 30%, 30%;background-position: 130%, -30%;}}</style>
</head>
<body>
<div></div>
</body>
</html>

使用css实现扫描效果相关推荐

推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
html css鼠标手型效果
html css鼠标手型效果 style="cursor:pointer" 转载于:https://blog.51cto.com/chengang/1288597
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变，关于HTML+CSS的实例效果很多， - phpStudy...
关于HTML+CSS的实例效果很多,下面举出常用的几列,供新手们学习参考. html+CSS实例效果(1):鼠标滑过改变文字鼠标经过变换文字 #Menu{ width:500px; margin:5 ...
html 悬浮阴影,css实现悬浮效果的阴影的方法示例
本文介绍了css实现悬浮效果的阴影的方法示例,分享给大家,具体如下: 要实现的效果图: 实现的代码: -webkit-box-shadow:0px 3px 3px #c8c8c8 ; -moz-box ...
制作css开关,纯css实现开关效果
大家好,我又来了,这次给大家表演使用纯css实现开关效果首先是构思我们使用标签来实现这个效果. checkbox的选中.未选中的特性,刚好对应开关的打开.关闭 on:打开 off:关闭未选中,则 ...
html 星空效果,使用css实现星空效果！
css实现星空效果 html, body { height: 100%; overflow: hidden; } body { width: 100%; height:100%; background ...
《javaScript100例|03》自写javaScript+CSS轮显效果
目录效果图代码示例源码地址:自写Js+CSS轮显效果.rar-互联网文档类资源-CSDN下载https://download.csdn.net/download/weixin_41937552/ ...