关于扫描图片或者div移动的CSS处理

灰太狼 2023-06-27 05:47 18阅读 0赞

做一些前端都会遇到一些，让你做一些效果，比如说上下，左右移动在一个范围内，不管是不是刚性需求，但是能让页面动起来，有一个动态的效果，看起来还是很不错的。但是该怎么做呢，其实如果你是做小程序或者用到某些框架自带的组件可以解决这个问题，但是组件有bug或失控就很蛋疼。当然你还可以自己写JS，但是自己尝试过，也参照过别人的例子，但是一言难尽，效率不高是一个问题。

那么有没有一种效率高，维护简便的来实现扫描或者移动的效果呢？当然有，其实CSS就可以满足这个，首先CSS这个要比手写JS高多了，而且更简单维护。以下是我的事例和相关代码：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]

.scan-container image{
      width: 100%;
      height: 100%;
    }
    .scan-line{
      width: 516rpx;
      height: 10rpx;
      position: absolute;
      top: 0;
      left: 0;
      animation: line-scan 3s infinite;
      animation-timing-function: linear;
      z-index: 100;
    }
    @keyframes line-scan{
      from{
        top: 0rpx;
      }
      to{
        top: 490rpx;
      }
    }

主要是这个线的移动，采用的是@keyframes这个匀速的向下移动，当然你结合transform会有更多花样，比如唱，跳，rap，打篮球。我看到有人弄出不少有意思的动态演示。  
一下文章可以参照来看一下：  
[keyframes的初步介绍][keyframes]  
[这个老哥，结合keyframes CSS3特性的多种动态演示代码][keyframes CSS3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200103201017357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ZlaUNoYW5nV3VSYW8=,size_16,color_FFFFFF,t_70
[keyframes]: https://www.w3school.com.cn/cssref/pr_keyframes.asp
[keyframes CSS3]: https://blog.csdn.net/zhanghao86_/article/details/77199332