使用CSS过渡动画实现一种有趣的效果

在交换友链的过程中，发现 Kaciras' Blog 的友链有一个很有趣的特效。

大概效果可以看下面的演示，也可以去 Kaciras 的博客查看

OhYee

不过，想了下我的博客似乎没什么用得到的地方，所以留个笔记以供后用吧

实现思路

这个是纯 CSS 即可实现的，主要依赖于 CSS 过渡动画transition

过渡动画

作为一个专业的非前端人员，虽然知道transition属性，但是为了严谨还是打开对应的文档

从文档可知，该属性有 1∼41\sim4 个参数，根据参数个数不同，分别有如下功能：

• 要添加过渡动画的属性
• 要添加过渡动画的属性，动画
• 要添加过渡动画的属性，持续时间，动画
• 要添加过渡动画的属性，持续时间，动画，延迟时间

首先是要过渡动画的属性，其设置的是要针对哪一个 CSS 属性增加过渡动画。其并非支持所有的 CSS 属性，具体支持的列表可见 Animatable CSS properties，如果想对所有属性都开启过渡动画，可使用all

动画属性表明了过渡动画的执行曲线

另外两个参数则顾名思义是相应的动画持续时间和动画开始前的延迟。

需要特别注意的是，过渡动画应该是针对同一个属性不同数值。在此处，使用top和bottom来实现上下两个区域的位置。即使默认情况下，top和bottom的初始值是0，这里仍然需要显式知名0px，否则可能在某些情况下无法正确执行动画。

实现代码

样式代码

如果使用 less 应该会更优雅一点，不过这里还是使用更常用的 css 来做演示。

<style>
    .wrapper{
        width: 300px;
        height: 150px;
        background: pink;
        overflow: hidden;
        /* content 需要使用绝对定位，而绝对定位的基础是第一个非 static 父元素 */
        position: relative; 
    }
    .wrapper .top-wrapper{
        width: 100%;
        height: 75px;
        background: rgba(255,255,255,0.9);
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        text-align: center;
        position: relative;
        /* 默认 top 为 0px */
        top: 0px;
        /* z轴在第二层 */
        z-index: 2;
        /* top过渡动画为1秒 */
        transition: top 1s ease;
    }
    .wrapper:hover .top-wrapper{
        /* hover后向上偏移100px */
        top: -100px;
    }
    .wrapper .top-wrapper img{
        /* 图片大小和位置 */
        width: 50px;
        height: 50px;
        border-radius: 50px;
        background: white;
        padding: 5px;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        margin-top:50px;
    }
    .wrapper .bottom-wrapper {
        width: 100%;
        height: 75px;
        background: rgba(255,255,255,0.7);
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        text-align: center;
        position: relative;
        bottom: 0px;
        z-index: 1;
        transition: bottom 1s ease;
    }
    .wrapper:hover .bottom-wrapper{
        bottom: -100px;
    }
    .wrapper .bottom-wrapper p{
        padding-top: 25px;
    }
    .wrapper .content {
        width:100%;
        height:100%;
        position: absolute;
        top:0;
        left:0;
        padding: 5px;
    }
</style>

页面代码

<div class="wrapper">
    <div class="top-wrapper">
        <img src="https://www.oyohyee.com/static/img/logo.svg">
    </div>
    <div class="bottom-wrapper">
        <p>OhYee</p>
    </div>
    <div class="content">
        <p>打开后可以看到更多详细信息</p>
        <p>这里也可以放一个图片</p>
    </div>
</div>