使用css实现扫描效果

r囧r小猫 2022-09-11 08:20 214阅读 0赞

## 实现下图中的扫描效果 ##

![请添加图片描述][d9215c7cfd4742bdb39ccac6bcbe4ba1.gif]

## **需求分析** ##

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

## 实现方案 ##

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

让ui切一张大小一样的纯色svg，一定要是纯色，不带边框阴影等各种效果的svg,这样可以快速得到容器尺寸，下图便是我们ui切出来的svg  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVzaUNvZGVyMzI_size_20_color_FFFFFF_t_70_g_se_x_16]  
可以看到容器尺寸有了，但是很不方便计算，原因在于存在一个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>

**实现的容器效果如下**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVzaUNvZGVyMzI_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 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>

[d9215c7cfd4742bdb39ccac6bcbe4ba1.gif]: /images/20220828/e40e3513320d4600bc6a5a2707ef6ad0.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVzaUNvZGVyMzI_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/6045662c2d5c469bbd263e8ea937e758.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVzaUNvZGVyMzI_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/ac099ff76a79463d8e1474b4f3336da0.png