码迷,mamicode.com
首页 > Web开发 > 详细

如何用css3实现动态下拉框

时间:2017-02-28 13:34:12      阅读:211      评论:0      收藏:0      [点我收藏+]

标签: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实现动态下拉框

标签:htm   css3   idt   font   效果   class   overflow   pad   如何   

原文地址:http://www.cnblogs.com/iam188/p/6478298.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!