Lichin

contact: vic20087cjimlin@gmail.com

I am

# Demo page

hover button


# Design 由來

Pokemon Go 開始在全球發燒,可惜 Taiwan 還未開放,在玩遊戲之前先做個練習。趁實習閒暇之餘做了4顆animation button, 這次運用了很多 overflow:hidden 來製作按鈕,顏色以及形狀上盡量走簡單風格,主要著重在動畫展現的部分。以下說明我製作的原理以及過程:

  1. Ocean: 波浪效果,以及加入顏色變化,有污物以及珊瑚兩種 style
  2. Minecraft: 8-bit 效果,以及在按鈕中間加入角色
  3. Pixar: border opacity 效果,簡單但是個人認為很耐看
  4. Pokemon: 營造打開寶貝球的感覺,以及字的活潑動畫


#1 Ocean

        這是海洋環境議題相關的按鈕組,左方是污染的過程,右邊則是珊瑚五顏六色的象徵。其實這兩顆都是放入 border-radius 接近50%的圓角四方形,並且不停的原地旋轉,製造出類似波浪的動畫。

        接著是 hover的效果,當滑鼠滑入讓四方形緩緩往上並加入顏色變化,就好像海浪的變化一樣,下方的 gif 可以看到去掉 overflow:hidden之後的狀況,另外,加入不一樣的顏色後還會發現按鈕有著不一樣的生命力。




#2 Minecraft

        首先是按鈕中間 creeper 可愛的臉,這單純是用一個 div 裡頭運用 before、after 來達到的簡單作法。文末也放上另外一種方式 8-bit畫畫工具 ,應該可以做出更多複雜的圖形,讀者可以去玩玩看!

        接著是方格背景,這邊用上 CSS3 Patterns Gallery 裡頭的 linear-gradient 方法,有機會筆者也會多多研究裡頭新奇的技巧。例如這次的按鈕中就發現如果將 background-size 縮到極小,那麼這些細小方格反而就不會顯示出來,借由hover讓size加大,居然就作出這個特別的按鈕了。



#3 Pixar

        這兩顆按鈕的做法很像,一個是由大變小, 另一個反之。每個按鈕分別有兩個小 div 組成,剛好就是 上下border左右border 這兩組。

        可以發現再加入 widthheight 的長度變化後就可以作出跟一般按鈕 border 不一樣的感覺。雖然做法不難,但是因為加入一點小設計,會給人新鮮的感覺,這是裡頭我看起來覺得很舒服的一組按鈕。




#4 Pokemon

        這是一顆寶貝球!我想營造出打開寶貝球的感覺,顯然兩塊背景分別往上下打開,正是寶貝球中的東西要出來了!在這裡,也是運用 overflow:hidden來限制滑出的物件。

        在裡面的字首先會有一道黑色的bar由左到右劃開,接著會有上下兩個文字往中間集中,這裡的動畫參考了 Inspiration for Text Styles and Hover Effects 裡面的 Mallki 字體效果,並且更改上下兩個文字的顏色,維持寶貝球上紅下白的顏色。



# 參考

這次的練習主要是想讓一些生活上的東西更能結合到 Web UI 上面,希望不只有練習到技術,也能將想法融入到這些元件之中,製作出富有意義、創新的產物。

  1. my codepen
  2. my hover button
  3. CSS3 Patterns Gallery
  4. pixel-art-react by Javier
  5. Inspiration for Text Styles and Hover Effects


blog comments powered by Disqus

Published

28 July 2016

Tags

title

yo! trying to alert