使用 transform 實作的 hover 動效 3

hover 的效果3

先來看效果

在寫效果的過程中, 一定要注意使用

transform

而不傾向改變

left

實作動畫. 另外複習

content

屬性值可以使用

attr()

函數

HTML

<a href="">
  <span class="text" data-before="新春快樂" data-after="🐰年大吉"></span>
</a>
           

CSS

主要思路是, 通過

left

調整元素初始的位置, 然後通過

transform

調整

hover

時元素的位置

.text::before, .text::after {
  position: absolute;
  width: 100%;
  text-align: center;
  transition: transform .5s ease;
}
.text::before {
  content: attr(data-before);
}
.text::after {
  left: 100%;
  content: attr(data-after);
}
a:hover .text::before,
a:hover .text::after {
  transform: translateX(-100%);
}
           

謝謝你看到這裡😊