css实现元素hover状态元素底部上移半透明浮层

起因：
偶尔翻了个网站，看到里面的小动效简单但又能使页面交互变得生动，便f12看了下动画实现代码。

图一

最终实现效果：

图二

具体实现代码：

    
    




    

     
         
文章
         here you can check all what i had writed in public
        
    
    

     
         
动态
         you can know more about me in here
        
    
    

     
         
热门文章
         the articals i gat likenum heighter
        
    

解析：

1. 关键点：
   设 .box 为绝对定位，而浮层 .text 为他的绝对定位，定位在 .box 盒子的底部。

2. 动效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. 动效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 元素用伪类来代替可不可以，当然是可行，如果浮层内容就那么简单的话。但是实际业务中，浮层内容可能不止那么单调，可能是要嵌套好几个元素才能实现的，而这样元素又有各自的样式。其实这些都是灵活可变的，可据实际需求来选择。

动画关键点就那么几个：

1. 父子元素控制好相对定位；
2. hover 状态下需展示的元素先写好，只是默认状态下是隐藏的；
3. 隐藏的方法可以是： 透明度的控制(opacity)、位移的控制(position、translate)、体积大小的控制(width、height、scale)；
4. hover 时把元素从 无 -> 有，即改变上面 “隐藏方法” 的值；
5. 在改变这些值的同时用 transform 设置一个过度时间，使视觉上能看这个过度过程。过度时一般为 2.5s - 5s ，看具体过度距离来定。

---

纯css 实现tab导航栏下划线跟随动画
小程序 纯css 实现tab导航栏下划线跟随动画
css实现input聚焦底部边框动态
css小动画（大小变换 、水波纹、loading）