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 属性便可实现