1、首先我们定义一个div的类.div-test-up ,div为flex布局，并且align-items: flex-end;代码如下
.div-test-up
{ height: 100px; display: flex; align-items: flex-end; }
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-up"> <span class="span-test">向上</span> </div>
4、编写代码后，在浏览器中查看，界面如下
5、当鼠标移上去是，span 的高度向上增高
6、整理代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>transition向上展开</title> <meta name="generator" content="" /> <style type="text/css"> .div-test-up { height: 100px; display: flex; align-items: flex-end; } .span-test { font-size: 12px; display: block; height: 27px; width: 27px; transition: height 1s; background-color: rebeccapurple; } .span-test:hover { height: 100px; } </style></head><body> <div class="div-test-up"> <span class="span-test">向上</span> </div></body></html>
