奖牌闪过光泽效果看到头条冬奥会奖牌榜的闪光效果觉得挺好看也照着弄了一个。主要使用到了css3的渐变色和动画，比较简单

看到头条冬奥会奖牌榜的闪光效果觉得挺好看也照着弄了一个。主要使用到了css3的渐变色和动画，比较简单。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .medal {
    position: relative;
  }

  .medal img {
    width: 250px;
    height: 250px;
  }

  .flash-wrap {
    width: 180px;
    height: 180px;
    position: absolute;
    top: 50px;
    left: 35px;
    border-radius: 100%;
    overflow: hidden;
  }

  .flash-wrap .flash {
    position: absolute;
    left: -100%;
    animation: sheen 4s ease infinite;
    width: 150px;
    height: 200px;
    content: "";
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(249, 255, 169, .4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-45deg);
  }

  @keyframes sheen {
    75% {
      left: -100%;
    }

    100% {
      left: 150%;
    }
  }
</style>

<body>
  <div class="medal">
    <img alt="" src="./333.png">
    <div class="flash-wrap">
      <div class='flash'>
      </div>
    </div>
  </div>
  <script>

  </script>
</body>

</html>