沒想到 CSS 也做的到?!

一個「生動」的網站絕對少不了 Javascript (JS) 的幫忙,很多有趣的特效交給 JS 或甚至丟給 Jquery 就對了!不過我們仔細看看 JS 裡到底做了什麼事讓我們的網站活起來呢,其實大部分的特效,JS 只是幫我們動態的去改變元素的 CSS 而已。那可以直接就在 CSS 中完成特效嗎?!完。全。沒。問。題。

舉例來說,最常見的特效就是當滑鼠移過去的時候,可以換個底圖或改變字的顏色,我們來瞧瞧 CSS 怎麼辦到的吧:

html:

css:

我們只要多定義該元素的 “:hover" 這個虛擬類別 (pesudo class) 的 CSS 就可以了!!

不相信嗎?!這裡有 live demo

除此之外,當滑鼠移到導覽列上,會出現下拉式選單,也可以單純用 CSS 就做出來哦!!

先來看一下 live demo

在 demo 中我們可以發現到下拉式選單 (class level_2) 的 CSS 是透過 top:-1000px; 把他丟到外太空去

當滑鼠移到的父元素 .navlist>li 時,我們再設定他的 top:20px;  讓他回到地球上,登登~就完成了!!!

上面兩個例子,可以發現「香蕉人」是用 :hover 去取代 JS 中 mouseover 發生後所做的事情,除此之外 :active 對應的 event 就是 mousedown。這時候一定會有人客會問,那要怎麼解決 click 這個 event 呢?! 嗯…這時候只能問香蕉了!!好的~香蕉現在就來告訴人客,click event 並沒有辦法靠 CSS 單槍匹馬,扑克牌制作 這時候真的就需要 JS 協助了,只需要少少的幾行 JS 就可以了~

一樣我們先來看 live demo

在這個例子中,香蕉人想做一個簡單的開關,當 user 點下去的時候會由「關到開」或「開到關」,

JS 的部分,只要 #handle 這個元素"聽"到 click 這個 event,就會去更改 #container 的 class

接下來所有的變化全部交給 CSS 囉!!

先設定 .content 以及 #handle 預設的 CSS

當#handle 聽到 click event 後,將 #container 的 class 改成 off-status

在 off-status 的 CSS 定義:

反之,在 on-status 的 css

是不是很酷呢!!!

在 CSS3 定義更多的 animation *1 之後,各元素之間都可以靠 CSS 做出更 fancy 的效果,例如 Mozilla Taiwan 社群頁面 中切換角色時的動畫也是透過同樣的原理做出來的。

說了這麼多,一定有人會問說 JS 用起來很舒服很開心啊,為什麼要改成 CSS 呢?其實也沒有什麼不好,但是當你的網頁碰到不同 layout 的時候,其中透過 JS 處理 CSS 的部分就會很難解了,那單純用 CSS 怎麼救呢? 哈哈~這時候就要靠 Media Queries *2了!

揪~~竟~~ Media Queries 的出現帶給 CSS 什麼樣的助力呢? 讓我們再看看香蕉人下一篇的分析囉~

*1 https://developer.mozilla.org/en/CSS/CSS_animations

*2 http://www.w3.org/TR/css3-mediaqueries/

*3 圖片創作 by Sarah Deng

您可能也會喜歡

目前找不到相關文章

共 1 則讀者回應

  1. 參照: CSS 連這個也辦的到?! 淺談 CSS media queries | Mozilla Tech | 謀智台客

對此文章發表回應

你的電子郵件位址並不會被公開。 必要欄位標記為 *