Question

这是我制作的页面，发生这些问题的位置：http://archy-user.name/

CSS：http://archy-user.name/css/style.css

基本上，这是一个我用来练习/学习与Web开发相关的东西的网站。

我所涉及的所有内容都进入了该网站的子文件夹，这意味着主页为空。因此，我决定制作这个新的首页，尽管经过硬编码，只是为了使其不为空...

技术上已经完成。

在对网站进行编码时，我使用了Google Chrome开发人员版来呈现页面，几分钟前，我检查了它在其他浏览器中的呈现方式。

PS：按预期，页面渲染器会很糟糕！

有两个问题：

将鼠标悬停在圆圈上时，会出现消除模糊并增加剪切路径大小的动画。在将模糊添加到代码之前，它可以正常工作（当动画仅覆盖剪切路径时）。现在，它可以“正常”运行，但是图像边界在剪切路径之外以矩形格式闪烁，就像没有剪切路径一样。这种闪烁包括圆圈内图像的“笔画”或“轮廓”。如果注意闪烁，您会发现“笔触”来自剪切路径后面的图像。 这仅在Google客户端开发版中发生：https://i.stack.imgur.com/UMJCE.png
将鼠标悬停在圆圈上时，其中的文本会立即变得模糊不清并移位，然后在两种chrome版本上都恢复正常，这是经过一些研究后我尝试做的事情：
- “ transform：translateZ（0）”：添加到圆上，以及圆的“之前”伪元素。它修复了动画过程中模糊的文本，但实际上将文本悬停在文本上时会移动文本（悬停在文本上的动画在添加此行之前未移位），还会使圆圈闪烁（与第一个问题不同，这种闪烁会发生在实际圆/剪切路径的内部，而前一个问题在圆/剪切路径的外部），将行添加到文本类不会改变任何内容。
- “背面可见性”：像“ transform”方法一样，使所有圆圈闪烁。
- 还尝试对文本应用抗锯齿功能，没有进行任何更改。

到目前为止，这还不是我尝试过的事情。

尽管在我的辩护中，关于模糊文本/动画的问题的答案没有任何变化，但是所有答复都是关于三种方法的，我已经尝试了所有这些方法，但都没有达到目的（即确实起作用，造成了另一个问题）...

如果我不得不猜测的话，那就是我需要在某些css元素中添加“ -webkit-”，考虑到它在Firefox上可以正常工作，但在Chrome上却无法工作...问题是，我不是我非常熟悉使用webkit前缀，因此不确定何时应该使用或不应该使用它，并且由于大多数方法在没有前缀的情况下都能正常工作。

以下是项目的格式：

.container {
  margin-top: -50px;
}

.content {
  width: 1000px;
  height: 900px;
  position: relative;
}

.grid {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  font-family: 'Pacifico';
  font-size: 35px;
  text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
  font-weight: bold;
  color: white;
  grid-row-gap: 1rem;
  position: relative;
}

.proj {
  top: 35%;
  position: relative;
  color: rgba(255, 255, 255, 0.8);
  transition: 0.3s;
}

.proj:hover {
  color: crimson;
  outline: 3px rgba(255, 0, 255, 0.3) solid;
  background: rgba(216, 112, 147, 0.3);
  box-shadow: 2px 2px 4rem rgba(156, 5, 5, 0.1), 0px 0px 4rem rgba(156, 5, 5, 0.3), 0px 0px 5rem rgba(156, 5, 5, 0.3);
  -webkit-text-stroke: thin rgba(0, 0, 0, 0.4);
}

.circle_name {
  width: 285px;
  height: 285px;
  text-align: center;
  transition: 0.3s;
  clip-path: circle(40%);
  position: relative;
  cursor: pointer;
}

.circle_name::before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: url('https://fillmurray.com/300/300');
  background-size: cover;
  filter: blur(10px);
  transition: 0.8s;
}

.circle_name:hover,
.circle_name:hover::before {
  filter: blur(0);
  -webkit-filter: blur(0);
  clip-path: circle(50%);
}

<div class="container">
  <div class="content">
    <div class="grid">
      <!-- ALL ITEMS GO HERE -->
      <div class="circle_name">
        <span class="proj">Circle Text</span>
      </div>
    </div>
  </div>

CSS剪切路径会在Google Chrome开发人员上闪烁图像，动画过程中文本和图像变得模糊不清并移位

0 个答案: