box-shadow动画性能优化实例页面

展示

代码

• HTML：

  <div class="normal">常规模式</div>
  <div class="optimize">优化实现</div>

• CSS：

  .normal,
  .optimize {
      display: inline-block;
      width: 150px; line-height: 100px;
      background-color: #fff;
      border-radius: 1rem;
      border: solid deepskyblue;
      transition: all .5s;
  }
  .normal:hover,
  .optimize:hover {
      transform: scale(1.25, 1.25);
  }
  .normal {
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  }
  .normal:hover {
      box-shadow: 0 16px 24px rgba(0, 0, 0, 0.7);
  }
  /* 优化实现 */
  .optimize {
      position: relative;
  }
  .optimize::before,
  .optimize::after {
      content: "";
      position: absolute;
      left: -3px; right: -3px; top: -3px; bottom: -3px;
      border-radius: inherit;
      transition: opacity .6s;
      z-index: -1;
  }
  .optimize::before {
      box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
  }
  .optimize::after {
      opacity: 0;
      box-shadow: 0 16px 24px rgba(0, 0, 0, 0.7);
  }
  .optimize:hover::before {
      opacity: 0;
  }
  .optimize:hover::after {
      opacity: 1;
  }