懸停時傾斜效果錯誤
P粉520545753
P粉520545753 2024-03-29 13:34:50
0
1
399

我有一個帶有傾斜效果的按鈕,裡面有一個文本,當我懸停該按鈕時,按鈕旁邊會出現兩行。

有程式碼,將滑鼠懸停在按鈕上直到看到它,這是一個非常隨機的副作用。

我認為這是 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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板