CSS3 transition 属性 高度往下展开功能

1、首先我们定义一个div的类.div-test-down;代码如下.div-test-down { height: 100px; }

2、然后我们定义一个span的类.span-test。代码如下.span-test垓矗梅硗 { font-size: 12px; display: block; height: 27px; width: 27px; transition: height 1s; background-color: rebeccapurple; }

3、我们胆咣骜岱编写html代码，span在div里面<div class="div-test-down"> <span class="span-test">向下</span> </div>

4、编写代码后，在浏览器中查看，界面如下

5、当鼠标移上去是，span 的高度向下变长

6、这样，用css3的transition 属性便可实现