iT邦幫忙

2021 iThome 鐵人賽

DAY 4
0
Modern Web

CSS 讓你的網頁動起來系列 第 4

CSS微動畫 - 按鈕效果只有一種太單調啦!

  • 分享至 

  • xImage
  •  

Q: 網路上找到的看起來都很厲害,程度能比嗎?
A: 厲害歸厲害,每個效果都適合你的網站嗎?

讓元素對使用者的操作有「回應」可以讓使用者有跟網頁「互動」的感覺,透過css讓元素有「微動畫」的效果,以提昇網頁的質感!上一篇有提到可以針對元素的狀態:hover:active等偽類進行樣式的修改,搭配transition讓元素在狀態間的變化有漸進感,達到「微動畫」的效果。

本篇將繼續使用:hover:activetransition製作多種按鈕的動態效果,看完本篇後會發現,其實不用引用套件(庫),自己寫效果加上class就可以讓元素動起來。

/* 以下每個範例都將使用相同的基礎html及css,如下:*/
<style>
  .btn {
    position: relative;
    margin: 300px;
    width: 150px;
    line-height: 60px;
    font-size: 20px;
    color: RoyalBlue;
    text-align: center;
    background-color: Lavender;
    cursor: pointer;
    transition: .1s;
  }
</style>
  
<div class="btn">I'm a button</div>

normal btn

陰影效果浮出按鈕

<style>
  .btn_float:hover {
    transform: translateY(-6px);
    box-shadow: 2px 2px 6px 2px RoyalBlue;
  }
  .btn_float:active {
    transform: translateY(-6px) scale(.98);
  }
</style>

shadow btn

內陰影效果按鈕

<style>
  .btn_shadowInset {
    box-shadow: inset 0 0 0 0 transparent;
  }
  .btn_shadowInset:hover {
    box-shadow: inset 0 0 6px 2px RoyalBlue;
  }
  .btn_shadowInset:active {
    box-shadow: inset 0 0 6px 4px RoyalBlue;
  }
</style>

shadow inset btn

導角變化效果按鈕

<style>
  .btn_borderRadius:hover {
    border-radius: 15px;
  }
</style>

border radius btn

知己知彼百戰百勝

當你開始用transition並可以透過偽元素新增變化時,就可以不受限於別人寫好的效果,做出屬於自己的風格。謎音:而且不用多寫很多程式碼呢~


如果有寫錯的地方,歡迎點評! 會及時改進~
如果有更好的寫法,歡迎指教! 希望各位不吝賜教~
如果想看更多效果,歡迎敲碗! 提供示意圖小編寫寫看~
如果內容疑似侵權,拜託告知! 內容皆為小編理解後原創~
如果對你有點幫助,拿去用吧!


上一篇
CSS微動畫 - 為什麼別人的按鈕點起來比較有感覺?
下一篇
CSS微動畫 - 善加利用偽元素可以做出更多變化
系列文
CSS 讓你的網頁動起來30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言