CSS3 transition 属性 高度往上展开增高

CSS3 transition 属性 高度往上展开增高

最近需要实现一个功能，就是鼠标移动到span上，span向上动态增高。由于是初学者，很多东西都不会，搜索了很久，才发现只要用flex布局就行。下面是详细步骤

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

.div-test-up

{ height: 100px; display: flex; align-items: flex-end; }

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

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

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

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

当鼠标移上去是，span 的高度向上增高

整理代码如下