悬停时倾斜效果错误
P粉520545753
P粉520545753 2024-03-29 13:34:50
0
1
339

我有一个带有倾斜效果的按钮,里面有一个文本,当我悬停该按钮时,按钮旁边会出现两行。

有代码,将鼠标悬停在按钮上直到看到它,这是一个非常随机的副作用。

我认为这是 Chrome 的问题,但我不确定。这是问题的图片:https://prnt.sc/hafHhDOHntco

.button-skew {
  position: relative;
  width: fit-content;
  padding: 6px 40px;
  border-radius: 5px;
  transform: skewX(-7.5deg);
  background: blue;
  transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8);
}

.button-skew:hover {
  padding: 6px 60px;
  transform: skewX(-7.5deg);
  background: red;
  transition: all 0.35s cubic-bezier(.47, 1.64, .41, .8);
}

p {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
  transform: skewX(7.5deg);
}
<div class="button-skew">

  <p>Contact us</p>

</div>

P粉520545753
P粉520545753

全部回复(1)
P粉505917590

嗯..这确实是一个渲染错误。我发现一条 CSS 行似乎是一种解决方法,但它使我的系统上的按钮文本有点模糊。这可能就是您正在寻找的内容。

据说它改变了元素的浏览器动画优化。

will-change: transform;

请参阅下面的代码片段,它不再显示线条了:

.button-skew {
  position: relative;
  width: fit-content;
  padding: 6px 40px;
  border-radius: 5px;
  transform: skewX(-7.5deg);
  background: blue;
  transition: background 0.35s cubic-bezier(.47, 1.64, .41, .8),
  padding 0.35s cubic-bezier(.47, 1.64, .41, .8);
  
  will-change: transform;
}

.button-skew:hover {
  padding: 6px 60px;
  background: red;
}

p {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
  transform: skewX(7.5deg);
}

Contact us

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板