運用 CSS transition、transform，製作按鈕滑動反轉的色塊。

Reverse Direction Button Hover Effects | Html CSS Tutorial For Beginners

重點筆記

1. transition

指定變換的相關屬性。

• transition-property，指定變換的屬性。
• transition-duration，指定變換的時間。
• transition-timing-function，指定屬性變換的速度。
• transition-delay，指定變換的延遲時間。

2. transform

指定元素的變形效果。

scaleX、scaleY，水平、垂直方向的縮放。

3. transform-origin

指定元素變型的基準點。

transform-origin 屬性為複合屬性值，其屬性包含水平（X 軸），與垂直（Y軸），方向的變量參數，變量參數間以空白隔開。如果只給一個數值，則變更水平（X 軸），垂直（Y軸）不變。

可用屬性值：

• 長度，數值 + 單位
• %（百分比），以元素預設中間的點的基準為百分比值
• left，靠左，水平方向位置的選項，等同 0%
• right，靠右，水平方向位置的選項，等同 100%
• top，靠上，垂直方向位置的選項，等同 0%
• bottom，靠下，垂直方向位置的選項，等同 100%
• center，置中， 水平、垂直方向位置的選項，等同 50%

程式碼

a {
  position: relative;
  width: 50px;
  height: 60px;
  color: #222;
  text-decoration: none;
  transition: .5s;
}
a:hover {
  color: #FFF;
}
a:after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0BBDA2;
  transition: transform .5s;
  transform-origin: right;
  transform: scaleX(1);
}
a:hover:after {
  transition: transform .5s;
  transform-origin: left;
  transform: scaleX(0);
}

 

codepen

發光漸層光環 - CSS 動畫