CSS3 transition 属性 高度上下展开变长

CSS3 transition 属性 高度上下展开变长

需要实现一个功能，就是鼠标移动到span上，span往高度上下两边展开变长。由于是初学者，很多东西都不会，搜索了很久，才发现只要用flex布局就行。下面是详细步骤

首先我们定义一个div的类.div-test-mid ,div为flex布局，并且align-items: center;代码如下

.div-test-mid { height: 100px; display: flex; align-items: center; }

然后我们定义一个span的类.span-test。代码如下

.span-test { font-size: 12px; display: block;蹲信海 height: 27px; width: 27px; transition: height 1s; background-color: rebeccapurple; }

给span-test增加一个hover事件。高度变为100px

.span-test:hover { height: 100px; }

我们编写html代码，span在div里面

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

当鼠标移上去是，span 的高度上下两边同时变化

全部代码如下