起因：
偶尔翻了个网站，看到里面的小动效简单但又能使页面交互变得生动，便f12看了下动画实现代码。
最终实现效果：
具体实现代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0
}
.content{
width: 100%;
font-size: 0; /*消除li inline-block 为行内元素后的默认间距*/
list-style: none;
}
.content li {
display: inline-block;
width: 33.333%;
vertical-align: top;
}
.box{
height: auto;
display: block;
position: relative; /*关键点： 设置绝对定位*/
overflow: hidden;
text-decoration: none;
transition: all 0.25s;
box-sizing: border-box; /*使盒子边距包含在盒子高度上*/
padding-top: 40px; /*上下总共80边距*/
padding-bottom: 40px;
}
.box .info{
width: 70%;
height: 123px;
margin: 0 auto;
transition: all 0.25s;
color: #fff;
font-size: 30px;
text-align: center;
}
.box .text{
display: block;
position: absolute; /*关键点： 绝对定位于.box*/
width: 100%;
left: 0;
right: 0;
bottom: 0;
height: auto;
padding: 20px 0;
background-color: rgba(255, 255, 255, 0.4);
transition: all 0.25s;
transform: translateY(100%);
color: #fff;
font-size: 17px;
text-align: center;
font-family: Arial;
}
.box:hover{
padding-top: 10px; /*上下总共80边距*/
padding-bottom: 70px;
}
.box:hover .text {
transform: translateY(0%);
transition: all 0.3s;
}
</style>
</head>
<body style="background: #fcc">
<ul class="content">
<li class="content" style="background: #38beac">
<a href="" class="box">
<div class="info">文章</div>
<span class="text">here you can check all what i had writed in public</span>
</a>
</li>
<li class="content" style="background: #000">
<a href="" class="box">
<div class="info">动态</div>
<span class="text">you can know more about me in here</span>
</a>
</li>
<li class="content" style="background: #ff5a5f">
<a href="" class="box">
<div class="info">热门文章</div>
<span class="text">the articals i gat likenum heighter</span>
</a>
</li>
</ul>
</body>
</html>
解析：
关键点：
设 .box 为绝对定位，而浮层 .text 为他的绝对定位，定位在 .box 盒子的底部。动效1 — 浮层出现
先来看下图，把 .box 盒子的 overflow:hidden 去掉之后的效果
如果把 “浮层出现” 说出 “浮层上移” 有没有好理解些。
即浮层(.text) 原本就是有的，只是他的父级设置了超过限定高度的内容隐藏不见，然后 hover 时让浮层上移到父级可见区域内。这就做到了浮层的出现/隐藏。
看下浮层（.text 的样式）
.box .text{
display: block;
width: 100%;
left: 0;
right: 0;
bottom: 0;
height: auto;
padding: 20px 0;
transform: translateY(100%);
}
注意点：
.box .text{
transform: translateY(100%);
}
.box:hover .text {
transform: translateY(0%);
}
默认就让浮层 下移 了自身高度，hover 时再让下移值为 0 。而其父级的 overflow：hidden，浮层下移后超出了父级元素限定高度，自然是看不见了，下移值为 0 时，浮层出现，就是我们看到的 “上移” 效果
图二中 浮层的高度是不同的，如何做到刚好上移自身的全部高度呢？
来看 浮层设置的样式
.text 设为块级元素后，宽度为 100%，高度设为auto或者不不设置（即默认由内容撑开）。我们所看到的浮层高度实际是由 里面的文字和 padding: 20px 0 撑开的。
那么 hover 上移时，上移自身高度的100%是不是就可以了。
其实给 浮层 设置一个固定高度，hover 时上移这个高度值也是可以的，但这样就变得不灵活，里面内容需做一定的限制了。
- 动效2 — "文章/动态/热门" 文字上移
其实能看到文字上移，实际上是包含文字的父级盒子(.box)的padding值在改变。
例如，把 .box 的 padding-top 值，从 40px 变为 10px，这样的话文字是不是就上移了。
看看图二红框部分，.box 设置的 padding 的上下值共 80（40+40） ，而 hover 时，padding的上下值也共有80（10+70）。即上移幅度的大小可以自己控制，只要原本的总 padding 上下总和 等于 hover 时 padding 上下总和 就可以达到效果了。
这里要注意一点：
把 .box 盒子设置一个高度，让后盒子模型设置为 “box-sizeing” 模式(边距边框高度包含在盒子高度内)，这样改变在后面改变padding 值时，只要改变的总值等于原本的总之，视觉上盒子高度就不会有改变。
后记：
如果看过 xxxx 这一篇的话，或许会问，这里的 .text 元素用伪类来代替可不可以，当然是可行，如果浮层内容就那么简单的话。但是实际业务中，浮层内容可能不止那么单调，可能是要嵌套好几个元素才能实现的，而这样元素又有各自的样式。其实这些都是灵活可变的，可据实际需求来选择。
动画关键点就那么几个：
- 父子元素控制好相对定位；
- hover 状态下需展示的元素先写好，只是默认状态下是隐藏的；
- 隐藏的方法可以是： 透明度的控制(opacity)、位移的控制(position、translate)、体积大小的控制(width、height、scale)；
- hover 时把元素从 无 -> 有，即改变上面 “隐藏方法” 的值；
- 在改变这些值的同时用 transform 设置一个过度时间，使视觉上能看这个过度过程。过度时一般为 2.5s - 5s ，看具体过度距离来定。
纯css 实现tab导航栏下划线跟随动画
小程序 纯css 实现tab导航栏下划线跟随动画
css实现input聚焦底部边框动态
css小动画（大小变换 、水波纹、loading）
