製作風琴導航的效果(五分鐘入手)

開發工具與關鍵技術:DW、CSS3
作者:邱慧敏
撰寫時間:2019.02.01

想要實現風琴的效果其實很簡單,用css就可以完成,簡單的思路就是:“把每一個標籤的鼠標移上去之後發生變化的時間都設置不一樣”如:第一個a標籤的時間爲0.05s , 第二個a標籤的時間爲0.1s ,第三個a標籤的時間爲 0.15s……如此類推 就可以實現效果了。

首先設置框架(可如下)
在這裏插入圖片描述
然後對框架進行設置,再對鼠標移上去之後的變化時間進行設置
在這裏插入圖片描述
在這裏插入圖片描述
效果圖:
在這裏插入圖片描述
然後鼠標移上去之後,就會產生風琴效果。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章