iT邦幫忙

2021 iThome 鐵人賽

DAY 2
1
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 3

#1-連結Hover動起來!(CSS 偽元素)

網站必備!連結動態

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

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

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

先看一下成果:

提案1.簡單大方的線框特效 提案2: 喝酒醉的文字換色 提案3:有點霸氣的,文字背景變變變
https://media.giphy.com/media/Zk2meGf1SJHamZw9bq/giphy.gif

下面會先廢話一下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.簡單大方的線框特效

https://media.giphy.com/media/Zk2meGf1SJHamZw9bq/giphy.gif

使用: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上去找!

有任何錯誤或意見請批評指教
/images/emoticon/emoticon37.gif


參賽廢話...

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

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

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


上一篇
#0-好的動態讓你成為網站界愛馬仕、特斯拉!(前言)
下一篇
#2 - Button文字換起來! (CSS: 移動位置)
系列文
這個網站也太嗨!30 個網頁動態提案33

1 則留言

0
Mao
iT邦新手 2 級 ‧ 2021-09-18 15:14:31

寫得很棒耶!
要做 Gif 圖真的又更麻煩了,
期待後面的文章!
/images/emoticon/emoticon37.gif

liawyudye iT邦新手 5 級 ‧ 2021-09-19 14:50:40 檢舉

謝謝你!
我用Giphy做GIF,其實錄製上傳滿快的!
然後再把連結放上來就好~

我要留言

立即登入留言