今天主要來講講transition和transform結合做的動畫,會舉一些現在(2023年)常見的動畫例子。效果:注:本人也接觸css3不久,如果寫的有紕漏請指出,不喜勿噴。
要做這個效果主要用到的是translate()
,思路就是把整個選單放到右下角,並且設定rigth
為負值
,當hover
的時候,translate()的x值設為負值,選單項就會往左平移,滑鼠移出時,也會收回去。
**如下:
item1
item2
item3
item4
.side-menu
.item
.item:hover
#item1
#item2
#item3
#item4
我們可以隨自己的喜好試著增加一些樣式的變化,這裡我隨便做乙個demo:
主要把初始化的透明度設為0.5,hover的高度、行高、字型大小和透明度改變:
.item
.item:hover
彈出式選單說到這裡,我們以後分享更多css3動畫的應用。 彈出式選單
彈出式選單 popmenu 大家都熟悉,在win98的桌面上單擊滑鼠右鍵彈出的選單就是彈出式選單。通常情況下,彈出式選單在滑鼠右鍵單擊時彈出,當然,也可以根據需要隨時彈出。在vc 5的mfc中,管理選單的類叫cmenu。下面我向大家介紹建立乙個彈出式選單的基本方法。一 在資源編輯器中建立乙個選單資源...
彈出式選單(PopMenu)
彈出式選單 popmenu 大家都熟悉,在win98的桌面上單擊滑鼠右鍵彈出的選單就是彈出式選單。通常情況下,彈出式選單在滑鼠右鍵單擊時彈出,當然,也可以根據需要隨時彈出。在vc 5的mfc中,管理選單的類叫cmenu。下面我向大家介紹建立乙個彈出式選單的基本方法。一 在資源編輯器中建立乙個選單資源...
製作彈出式選單
lonkil 很老的一篇關於選單的文章,還是不錯的。發出來吧!一 在資源編輯器中建立乙個選單資源 新建乙個選單資源,比如把選單的id號為idc popmenu。此選單有一項兩層,即有乙個可彈出的選單項,而此選單項的彈出內容即為將要建立的彈 出式選單的內容。如右圖,可彈出項 下的選單即為將要建立的彈出...