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

作者: liwuwuzhi | 来源:发表于2019-09-16 13:17 被阅读0次

css实现元素hover状态元素底部上移半透明浮层
hover的事件功能演示
hover
CSS hover、focus 父对子、子对父、同级之间的控制
transition、transform、animation
css和js控制的二级菜单区别
::before和::after伪元素的用法
12、切角效果
html元素全屏
浮动元素的值

起因：
偶尔翻了个网站，看到里面的小动效简单但又能使页面交互变得生动，便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 时上移这个高度值也是可以的，但这样就变得不灵活，里面内容需做一定的限制了。