标签: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>
标签:htm css3 idt font 效果 class overflow pad 如何
原文地址:http://www.cnblogs.com/iam188/p/6478298.html