網站必備！連結動態

連結的Hover動態算是網頁動態最基本款，
一個好的動態絕對可以幫網頁 點擊率（CTR） 加分。

(話說當時菜鳥的我根本不知道什麼是hover...
如果可以很貼心地跟非工程師的對方解釋一下，你就是貼心百分百啦！)

簡單一點換個顏色、調整一下opacity，
但今天想用偽元素來做 3個 Hover的連結動態！

先看一下成果：

提案1.簡單大方的線框特效	提案2: 喝酒醉的文字換色	提案3:有點霸氣的，文字背景變變變

下面會先廢話一下transition，想看成果的可以下滑到code喔！

再懶也要加 CSS transition 香料

就算是再懶也要加上 CSS transition...
Transition 是兩個不同狀態間切換時，漸變地過度，讓轉換不會太突兀。

有漸變	無漸變

上述的程式碼都一樣，但差一行code: transition: 0.3s。
就會讓兩者的變換間變得很香很高級。

就好像你很想知道眼前的正妹到底有沒有男朋友：

無漸變的?：妳現在有男友嗎？
有漸變的?：跟我出來妳男友會吃醋吧？（油油的說法）
有漸變的?：跟我出來妳男友會不會擔心？（好像很貼心)

(很爛的比喻?)

transition 詳細用法也可看這邊的鐵人：這裡

基礎設定：CSS 偽元素 :before & :after

我個人超愛偽元素，就是你不用付出一行html code就可以憑空多出東西來。
接下來要做的動態都有基本設定：

a{
  color: white; //我文字先用白的，背景黑
  text-decoration: none; //先把瀏覽器預設醜東西弄掉
  position: relative; //讓偽元素的absolute有個對應的位置
  transition: 0.5s; //香料加起來！
  
  &:before, &:after {
    content: ''; //偽元素裡面的內容先設空的
    position: absolute; //先讓偽元素飛起來！之後設定定位就隨心所欲
    transition:.3s; //香料加起來！我讓他比爹地 a 快一點
  }
}

下面的範例用before/after 我是隨性選一個 XD
因為使用position absolute都讓他飛起來了。

提案1.簡單大方的線框特效

使用：CSS( transition & 偽元素、transform)
原理：放大縮小

直接上code

.effect-1{
  &:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;//線的粗度
    background: white; //線的顏色
    transform:  scale(0); //先讓他隱藏, scale的意思就是讓他放大縮小
  }
  &:hover:before {
    transform:  scaleX(1);//hover時候再讓它出現
  }
}

transform 的起點預設是中間，就可以很漂亮地從中間展開一條直線！
上面想要再一條線的話就可以運用另一個偽元素:after 去做。

提案2: 喝酒醉的文字換色

使用：CSS( transition & 偽元素、width)
原理：放大縮小(變寬)

偽元素的content是可以直接讀取html裡面元素自訂的內容。所以這次我們的偽元素變成了一樣的文字蓋在上面長出來而已。

//html 
//用data-content去定義偽元素要呈現什麼內容
<h1><a href="#" class="effect-2" 
data-content="Hover Effect 2">
	Hover Effect 2
</a></h1>

//scss
.effect-2{
  &:after{
    content: attr(data-content);// 讀取html元素要顯示什麼
    left: 0;
    top: 0;
    width: 0%; //想要讓他橫的長出來，所以先設0
    height: 100%;//先給高

		//我這次想要華麗～gradient color的文字
    background: -webkit-linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
	  -webkit-background-clip: text; //背景要顯示在哪裏
	  -webkit-text-fill-color: transparent;//中間給他挖空啦才能有背景顏色
	  }

	  &:hover:after{
      width: 100%;//hover時候我就給他橫空出世～s
    }
}

提案3:有點霸氣的，文字背景變變變

使用：CSS( transition & 偽元素、width)
原理：放大縮小(變寬)

.effect-3{
  &:after{
    top: 0%;
    left: 0;
    width: 0%;
    height:100%;
    background: -webkit-linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
    z-index: -1; //把他壓下去
    }
 
  &:hover{ 
    color: black;
    transition-delay: 0.1s; //讓他晚一點點出來，不然會有瞬間是黑的

      &:after {
      top: 0;
      width: 100%    
    }
  }
}

以上！

以上的範例都整理在：這裏
範例是參考codepen上的
裡面還有很多上下左右可以變化，概念原理都滿像的，

這邊一堆特效也不錯

想要更多更酷炫的效果，也可以到codepen上去找!

有任何錯誤或意見請批評指教

參賽廢話...

第一篇花了我好多時間...平常都亂打code沒有深入去瞭解原理，
在寫的過程刪掉很多不需要的code
還有在搜集資料時很容易分心，看到好東西又捨不得關掉，開了一堆視窗...
參加鐵人也是在訓練自己搜集資訊的效率！

寫文章又是另一個功夫，為求清楚還要錄製GIF
看了很多文章，我覺得最能讓我吸收的寫法是把解釋寫在行內，而不是大篇解釋完再上code。

打篇有邏輯又不要太無聊的文章不亞於寫code的累...
嗚嗚嗚平常都看大家嘔心瀝血的文章，真是謝謝了！（獻上我的膝蓋）