Question

我正在尝试更改悬停时的伪元素的剪切路径和背景颜色。此过渡在Chrome和Firefox上可以完美运行，但在Safari上则不能。

我正在使用带有Webkit剪切路径的mixin，它在safari上显示了实际形状，但仍无法用于过渡。可见和悬停剪切路径的点数相同。

HTML：

<ul>
  <li>
    <div>
      <h3>
        monitor<br />distant<br />stations
      </h3>
      <p> system allows users to listen to comms from distances never before imagined.
      </p>
    </div>
  </li>
</ul>

SCSS：

@mixin clip($property) {
-webkit-clip-path: $property;
-ms-clip-path: $property;
clip-path: $property;
}

ul {
 font-family: helvetica;
 display: grid;
 grid-template-columns: 1fr 2fr;
 grid-template-areas: ". monitor";

li {
 grid-area: monitor;
 position: relative;
 list-style: none;
 div {
  margin-left: 45%;
  margin-top: 130px;

  h3 {
    display: block;
  }
  p {
    display: none;
  }
  &::after,
  &::before {
    @include clip(polygon(83% 0, 100% 45%, 61% 90%, 0 100%, 49% 5%));
    width: 65vw;
    content: "";
    height: 300px;
    left: 0;
    position: absolute;
    top: 0;
    transition: 0.5s;
  }

  &::after {
    background-color: #d25147;
    z-index: -2;
  }

  &::before {
    z-index: -1;
  }
}
&:hover {
  div {
    margin-left: 50%;
    margin-top: 40px;
    width: 35%;
    align-items: center;
    display: flex;
    flex-direction: column;
    h3 {
      display: none;
    }
    p {
      display: block;
    }

    &::after,
    &::before {
      @include clip(polygon(100% 45%, 61% 90%, 0 100%, 49% 5%, 83% 0));
    }

    &::after {
      background-color: #dba44a;
    }

    &::before {
      background-image: url("https://source.unsplash.com/random/360x560");
      background-position: -80px 0;
      background-size: 60%;
      background-repeat: no-repeat;
    }
  }
}
}
}

简化的Codepen问题： https://codepen.io/mbb670/pen/rNBwbdK?editors=1100

这是我（未完成）的网站，以获取更多背景信息：

http://matthewbarnettdesign.com/rangecast/index.html

理想情况下，无论浏览器是什么，我都希望这些转换是无缝的，因此，非常感谢您的帮助！

（我的背景图片也有问题（我将在另一个线程中发布），但是悬停的背景图片在Chrome和Firefox上显示正确，但在Safari上显示不正确。我发现这与background-size属性，但如果有人有任何想法，则无法弄清楚为什么它不起作用。）

伪元素剪辑路径过渡未在Safari上显示

0 个答案: