[分享]css3扫描旋转动画效果

CSS3扫描旋转动画是一种炫酷的效果，在展示图片、产品或网站特效时更是有用武之地。下面我们来了解一下如何实现这个效果。.scan{ :relative; width:60px; height:60px...

CSS3扫描旋转动画是一种炫酷的效果，在展示图片、产品或网站特效时更是有用武之地。下面我们来了解一下如何实现这个效果。

.scan{
  position:relative;
  width:60px;
  height:60px;
  background-color:#fff;
  overflow:hidden;
}
.scan::before{
  content:';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(to right, transparent, #fff 40%, #fff 60%, transparent);
  animation:scan 1s linear infinite;
}

@keyframes scan{
  to{
    left:100%;
  }
} 

首先，我们需要定义一个包裹元素，可以是div或其他块级元素。然后设置它的宽度和高度，并将其设置为relative相对定位，以便后续绝对定位的元素进行相对定位。接着，我们使用伪元素before来为该元素添加一个动画效果。before元素的位置设置为absolute绝对定位，并让它占据包裹元素的全部空间。

before元素的背景色设置为线性渐变，渐变的方向设置成从左往右。渐变的颜色值从透明到#fff，#fff颜色的起始位置设置成40%，结束位置设置成60%。这样可以实现白色区域在左右两端透明渐变，中间是纯白色，形成一个扫描效果。动画属性animation设置为scan，持续时间为1秒，线性无缓动效果，并设置为无限循环。

最后，我们需要为扫描效果添加一个关键帧，这里我们使用to表示末尾状态，即left:100%。这样before元素会不断地从左侧滑入，经过包裹元素中心后从右侧滑出，形成扫描旋转的动画效果。