如何将背景不透明度转换与图像元素分开

Question

这是我的代码：https://codepen.io/ijshd7/pen/GRJeQpP

.logo a {
  position: relative;
  display: inline-block;
}

.logo a::before {
  pointer-events: none;
  position: absolute;
  content: '';
  bottom: -30px;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  transition-duration: 0.3s;
  transition-property: transform, opacity;
}

.logo img:hover {
  margin-top: -8px;
  transition-duration: 0.75s;
}

.logo a:hover:before,
.logo a:focus:before,
.logo a:active:before {
  filter: alpha(opacity=100);
  opacity: 1;
}

.logo span {
  transition-duration: 0.3s;
  transition-property: transform;
}

.logo a:hover span,
.logo a:focus span,
.logo a:active span {
  transform: translateY(-10px);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css">
<header class="flex justify-center h-26 p-8">
  <div class="logo">
    <a href="https://google.com">
      <span>
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
        width="125"
      >
      </span>
    </a>
  </div>
</header>

我试图只让图像在 y 轴上偏移，同时让阴影效果出现，而不是让它随着图像实际向上移动。在这里分离关注点时遇到问题，并且对弄清楚如何这样做感到困惑。基本上我希望图像浮动并且阴影出现..但不移动。

Answer 1

像下面这样简化您的代码并将翻译应用到 img 而不是 span：

.logo a {
  position: relative;
  display: inline-block;
}

.logo a::before {
  pointer-events: none;
  position: absolute;
  content: '';
  bottom: -30px;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  transition-duration: 0.3s;
  transition-property: transform, opacity;
}

.logo a:hover:before,
.logo a:focus:before,
.logo a:active:before {
  opacity: 1;
}

img {
  transition: transform 0.3s;
}

.logo a:hover img,
.logo a:focus img,
.logo a:active img {
  transform: translateY(-10px);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.2.0/tailwind.min.css">
<header class="flex justify-center h-26 p-8">
  <div class="logo">
    <a href="https://google.com">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
        width="125"
      >
    </a>
  </div>
</header>

如何将背景不透明度转换与图像元素分开

How to separate a background opacity transformation from an image element

css

css-transitions