filter模糊对比度滤镜与粘滞效果实例页面

展示

代码

• HTML：

  <div class="container">
      <div class="box box-1"></div>
      <div class="box box-2"></div>
  </div>

• CSS：

  .container {    
      filter: blur(10px) contrast(5);
  }
  .box {
      width: 100px; height: 100px;
      border-radius: 50%;
      position: absolute;
      left: calc(50% - 50px);
      top: calc(50% - 50px);
  }
  .box-1 {
      background-color: deepskyblue;
      animation: fly-r 5s infinite alternate;
  }
  .box-2 {
      width: 60px; height: 60px;
      margin-top: 20px;
      background-color: white;
      animation: fly-l 5s infinite alternate;
  }
  @keyframes fly-r {
      from { transform: translateX(0); }
      to   { transform: translateX(120px); }
  }
  @keyframes fly-l {
      from { transform: translateX(120px); }
      to   { transform: translateX(0); }
  }