请用css写一个扫码的加载动画图

.scanner {
  width: 200px;
  height: 200px;
  border: 5px solid #009688; /* Customize color */
  position: relative;
  overflow: hidden;
}

.scanner::before,
.scanner::after {
  content: '';
  position: absolute;
  background-color: rgba(0, 150, 136, 0.2); /* Customize color and opacity */
}

.scanner::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  animation: scanline 2s linear infinite;
}

.scanner::after { /* Added to create a corner effect */
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  border-top: 4px solid #009688; /* Customize color */
  border-left: 4px solid #009688; /* Customize color */
}


@keyframes scanline {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}


/* Optional: Add a container for centering */
.scanner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* Adjust as needed */
}

<div class="scanner-container">
  <div class="scanner"></div>
</div>

Explanation and Improvements:

• Container for centering: The .scanner-container div uses flexbox to easily center the animation on the page. Adjust the height as needed.
• Color Customization: The main border color and the scanline color are easily customizable. I've used a teal color (#009688), but you can change it to your preferred color. The scanline uses an rgba value, so you can also adjust the opacity.
• Corner Indicator: The ::after pseudo-element adds a small square in the top-left corner, giving a visual cue that this is the starting point of the scan. This enhances the scanning effect.
• Animation: The @keyframes scanline animation moves the line from top to bottom repeatedly, creating the scanning effect. The linear timing function ensures a smooth, consistent speed. You can adjust the 2s duration to make the animation faster or slower.
• Size: The width and height of the .scanner element control the size of the scanning area. Adjust these values as needed.
• Border Thickness: The border: 5px solid ... controls the thickness of the border.

This improved version provides a more visually appealing and realistic scanning animation. Remember to include this CSS in your <style> tag or in a separate CSS file linked to your HTML. The HTML snippet shows how to use the scanner class.