如何用css3實現動態下拉框

標籤：htm   css3   idt   font   效果   class   overflow   pad   如何   

                                                           

例如上面就是一個動態下拉框（雖然我添加了transition但是網頁並沒有給我體現出來），實現的方法就是首先將div塊的高度設定為初始高度（20px），然後使用hover偽類事件，設定當滑鼠指上時高度變化為200px。這樣就能實現動態下拉框的效果。

需要注意的是transition屬性的使用。

並且如果裡麵包含其他模組的話，注意使用overflow: hidden;隱藏起來，不然無法達到效果。

測試代碼如下

<style><!--*{margin: 0px;padding: 0px;font-family: "微軟雅黑";        transition: all 1.5s ease;}.test{width: 200px;height: 20px;background-color: greenyellow;}.test:hover{height:200px;background-color: green;}--></style><div class="test"></div>

 

如何用css3實現動態下拉框