「沒感覺少女格鬥漫畫《相❤打》」玩 CSS3 轉場效果

沒感覺少女格鬥漫畫《相❤打》

網站名稱:沒感覺少女格鬥漫畫《相❤打》
網站頁面:公開結束。
使用特效:

這次做網站其實沒特定目的,只是剛好有設定、有想試玩的效果,就湊做堆玩出來了。本篇文章將不會逐一解釋各個效果,只會稍微談一下學到的東西。

CSS3 區塊滑動效果

即上面使用特效列表中的 “Page Transitions with CSS3″(CSS3 頁面轉換效果),與其說「頁面」、不如說「區塊」(div)。這個效果只是將區塊設定寬高 100%、讓它看起來是一個頁面,然後再使用 CSS3 做出滑動效果、就很像頁面轉換了。換句話說,這個成品網站其實只有 index.html 這麼一頁,並沒有其他頁面。這個效果沒有想像中的複雜,只是將一個原本在不可視位置的區塊,點選指定連結後、將區塊移至可視的位置;至於原理很簡單,使用的是 CSS3 的 :target,對這個選擇器有興趣的可參閱 W3Schools 的「CSS3 :target Selector」。

CSS3 動畫

這裡的動畫包含三個部分:TransformsTransitions、以及 Animations,這三者搭配可以不藉 Flash 或 Javascript 做出動畫效果。Transform 主要應用於元素的變形以及移動,Transitions 是樣式變換時的效果,而 Animation 則是和關鍵格有關的動畫。像 “Creative CSS3 Animation Menus”,即網站中的目錄連結、游標移上去字體會變動的效果,應用的就是 Transforms 和 Animations;而 “Amazing Image Hover Effects with Webkit and CSS3” 和 “Page Transitions with CSS3″,後者上面已提過,前者舉例就是書籍頁面、將滑鼠移上去滑出描述區塊,這些用的都是 Transitions。

檢討

問題大多是出在換頁效果上。首先,這個換頁效果不適合應用在大型網站上。如開頭所提、這個網站只有一個頁面,如果應用在大型網站上,可想而知可能會遇到不少相衝突的狀況、也需要做諸多調整以方便瀏覽,載入也是一個大問題。因此,非常不推薦使用在內容過多過複雜的網站上。第二,該效果有有自適應 (Responsive) 方面的 bug。有興趣看 bug 的朋友,只要將成品網站的視窗寬度、縮小到差不多 430 像素即可,整個頁面的最後一個區塊會疊上來。這些都是需要改進的。

最後,感謝品格君提供網站圖片(<ゝω・)

分類:網站網誌

  • 這次使用的幾隻特效都好有趣!之前不知道Snap.svg這隻JS,看上去功能好強大,但感覺要自己寫出什麼東西應該永遠是層障礙w
    一直也想做一個類似這樣的戀愛SLG造假站,卻因人數眾多(可能有個二、三十人)遲遲沒有動手。看到鱷子桑的《相❤打》就覺得我也真該趕緊努力努力!XD
    另,真喜歡雪芳的設定!請讓這邊加入雪芳後援會!!←

    • Wanico

      Snap.svg 當初看到時也很驚艷,特別這效果不是 flash 做出來的,不過這邊也是無法自己寫出東西,還是只能靠現成的來改(つд⊂)
      二、三十人絕對是個大工程!這邊光八個人就有點吃不消了。說真的這種造假網站沒一個團隊來做相當自虐;雖然是這樣說,還是很想看小彌桑的網站(喂)小彌桑加油!
      最後,雪芳後援會的一號會員就是你了XDD

  • Pingback: 免費漫畫軟體 MediBang Paint Pro 資源彙整 | Lab Crocodile()