1、首先我们创建一个html文件，写出html文件的一些基础代码，如下图：
2、然后我们在网页中新建一个div，并新建一个<ul>无序列表并创建4个<li>标签，如下图：
3、然后使用浏览器直接打开html文件，查看效果，可以看到我们创建的<li>标签自带有一定的格式，如下图：
4、接下来我们使用下面的代码去除<li>标签的格式，其中：
list-style:none; 表示去除<li>标签的格式
width:160px; 表示设置<li>标签的宽height:240px;表示设置<li>标签的高
background:#666666;表示设置<li>标签的背景色float:left;表示设置<li>标签浮动显示，并且为左浮动margin-right:20px;表示设置<li>标签右外边距
如下图：
5、刷新浏览器中html文件查看效果，如下图：
6、这里我们开始添加动画：
给<li>标签添加：
transition:transform 0.1s;
transform表示变换的属性，0.1上表示表换所需要的时间
另外给<li>标签添加鼠标滑动属性
li:hover{cursor:pointer;transform:translate(0,-10px);}
cursor:pointer;表示鼠标滑过显示为小手形状
transform:translate(0,-10px);translate表示移动，第一个参数为水平移动值，第二个参数为垂直移动值，如下图：
7、进入浏览器直接查看效果，如下图实现了鼠标滑过块，块上移的动画特效，如下图：
