Lichin

contact: [email protected]

I am

# 起因

延續之前的套件練習,這一次我又想製作全螢幕式的動態menu。 搭配適當的色票所組合而成的背景,以及動畫呈現, 於是促成這一個客製化套件的產生。

# demo

Davidmenu


# 製作心得

背景色挑選 linear-gradient

        為了讓背景色不單調,於是選擇使用漸層效果。如果仔細看過demo會發現, 顏色都沿著同一個角度去做變化,這是linear-gradient的呈現結果,以下說明兩種筆者最常用的特性,若是讀者想要更進一步了解其他屬性可以參考:reference


CSS animation-degree transform

        在Davidmenu最後兩種animation裡運用到rotate的函式。 這種函式讓動畫可以轉動,翻滾的呈現,常使用的有rotate , rotate3d,另外也有分別對三個方向描述的rotateX , rotateY , rotateZ,以下是我實際上運用的函式以及網路範例:

CSS display-flex

        每次要做排版時,總是綁手綁腳,又或是操作十分麻煩。 利用 flex 將可以做到很多以往難達成的排版,而且方法十分乾淨。flex-direction可以直覺的控制子物件 排列方向,另外以前覺得困擾的垂直至中也可以用輕鬆用 justify-content:center 來搞定!有興趣的讀者可以再參考下方連結。 裡頭有著初步的呈現flex的特性。

# 參考

  1. display:flex 版面配置
  2. 快速色票挑選器-coolors


blog comments powered by Disqus

Published

31 March 2016

Tags

title

yo! trying to alert