# 起因

延續之前的套件練習，這一次我又想製作全螢幕式的動態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

Published

Tags

• CSS 5
• jquery 2
• template 2