iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

動起來吧!Web Motion 動態特效網頁學習日記系列 第 8

讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (一)

除了網頁依照設計安排自己動之外,最有趣的部份其實是與使用者的互動,滑鼠移動、點擊、鍵盤按鍵、捲動、甚至是表單送出等,都是可以監控的事件。操控事件最簡單的方式就是直接使用CSS的虛擬類別(pseudo-class),像是滑鼠移到網頁元件的hover,和滑鼠或觸控點擊的active,可以說是最便於使用的方式。

:hover 按鈕的靈魂效果
通常來說,為了讓人能夠一眼便認出畫面中的按鈕,按鈕的設計上會以「好像可以點」的視覺圖像製作,像是使用邊框、大面積色塊、增加圖示甚至是增加陰影效果,都能讓按鈕看起來就像是個按鈕。
當大家知道那是顆按鈕時,就會將滑鼠移到上方然後點擊,在這個一連串可預期的互動中,就是設計師暗藏小互動的時候了!除了可以產生點即暗示意味,也能夠展現網站的風格,很多時候,這些小動態甚至可以說是整個網站的靈魂,不論是底色轉變為外框、彈跳效果、按鈕放大、字體換色等,都是可以嘗試的方式。

:hover使用方式很簡單,就是在指定的網頁元件的名字旁,加上:hover使用,接下來下方定義的就會是hover事件觸發時,所呈現的CSS內容,若想改用:active來修改按鈕被點擊後的css狀態,也可以使用一樣的方式。

.my-div {
    text-align: center;
    font-size: 24px;
    line-height: 55px;
    height: 55px;
    width: 130px;
    color: white;
    border: solid 2px #333;
    background:#333;
    box-shadow: 0px 0px 10px #777;
}
.my-div:hover {
    border: solid 2px #333;
    color: #333;
    background:white;
}

不過:active指的是被點的當下狀態,除非用戶一直按著不放,不然是部會一直留在畫面上,以這樣的直觀的操作是無法達成點按後改變狀態,像是Toggle的效果,會需要利用input或其他具有狀態的html標籤,搭配:before、:after等偽元素可以實作。

如何使用CSS實作toggle可以參考這份教學:
https://www.w3schools.com/howto/howto_css_switch.asp

前往後續文章
CSS 第二篇:https://ithelp.ithome.com.tw/articles/10269891


上一篇
認識 CSS animation 與他的孩子們 (二)
下一篇
讓按鈕來個酷動態! 操縱DOM事件:CSS 篇 (二)
系列文
動起來吧!Web Motion 動態特效網頁學習日記30

尚未有邦友留言

立即登入留言