在友链的网站发现一种很好玩的特效，尽管目前没有地方用起来比较合适，但是留作备份。

<h1 id="css">使用CSS过渡动画实现一种有趣的效果</h1>
在交换友链的过程中，发现 <a href="https://blog.kaciras.com/">Kaciras' Blog</a> 的友链有一个很有趣的特效。
大概效果可以看下面的演示，也可以去 Kaciras 的博客查看
<blockquote>
 <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">
 OhYee
 </div>
 <div class="content">
 打开后可以看到更多详细信息
 这里也可以放一个图片
 </div>
 </div>
</blockquote>
不过，想了下我的博客似乎没什么用得到的地方，所以留个笔记以供后用吧
<h2 id="heading">实现思路</h2>
这个是纯 CSS 即可实现的，主要依赖于 CSS 过渡动画<code>transition</code>
<h3 id="heading-1">过渡动画</h3>
作为一个专业的非前端人员，虽然知道<code>transition</code>属性，但是为了严谨还是打开<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition">对应的文档</a>
从文档可知，该属性有 <math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mn>1</mn><mo>∼</mo><mn>4</mn></mrow><annotation encoding="application/x-tex">1\sim4</annotation></semantics></math>1∼4 个参数，根据参数个数不同，分别有如下功能：
<ul>
<li>要添加过渡动画的属性</li>
<li>要添加过渡动画的属性，动画</li>
<li>要添加过渡动画的属性，持续时间，动画</li>
<li>要添加过渡动画的属性，持续时间，动画，延迟时间</li>
</ul>
首先是要过渡动画的属性，其设置的是要针对哪一个 CSS 属性增加过渡动画。其并非支持所有的 CSS 属性，具体支持的列表可见 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties">Animatable CSS properties</a>，如果想对所有属性都开启过渡动画，可使用<code>all</code>
动画属性表明了过渡动画的执行曲线
<table>
<thead>
<tr>
<th style="text-align:center">数值</th>
<th style="text-align:center">效果</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center"><code>linear</code></td>
<td style="text-align:center">匀速直线动画，相当于<code>cubic-bezier(0,0,1,1)</code></td>
</tr>
<tr>
<td style="text-align:center"><code>ease</code></td>
<td style="text-align:center">开始和结束缓速，相当于<code>cubic-bezier(0,0,1,1)</code></td>
</tr>
<tr>
<td style="text-align:center"><code>ease-in</code></td>
<td style="text-align:center">慢速开始，相当于<code>cubic-bezier(0.42,0,1,1)</code></td>
</tr>
<tr>
<td style="text-align:center"><code>ease-out</code></td>
<td style="text-align:center">慢速结束，相当于<code>cubic-bezier(0,0,0.58,1)</code></td>
</tr>
<tr>
<td style="text-align:center"><code>ease-in-out</code></td>
<td style="text-align:center">开始和结束缓速，相当于<code>cubic-bezier(0.42,0,0.58,1)</code></td>
</tr>
<tr>
<td style="text-align:center"><code>cubic-bezier(n,n,n,n)</code></td>
<td style="text-align:center">使用自定义的贝塞尔曲线，四个值都应该是<math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mo stretchy="false">[</mo><mn>0</mn><mo separator="true">,</mo><mn>1</mn><mo stretchy="false">]</mo></mrow><annotation encoding="application/x-tex">[0,1]</annotation></semantics></math>[0,1]，分别是起始点的控制坐标和结束点的控制坐标</td>
</tr>
</tbody>
</table>
另外两个参数则顾名思义是相应的动画持续时间和动画开始前的延迟。
需要特别注意的是，过渡动画应该是针对同一个属性不同数值。在此处，使用<code>top</code>和<code>bottom</code>来实现上下两个区域的位置。即使默认情况下，<code>top</code>和<code>bottom</code>的初始值是<code>0</code>，这里仍然需要显式知名<code>0px</code>，否则可能在某些情况下无法正确执行动画。
<h2 id="heading-2">实现代码</h2>
<h3 id="heading-3">样式代码</h3>
如果使用 less 应该会更优雅一点，不过这里还是使用更常用的 css 来做演示。
<pre style="background-color:#fff">&lt;style&gt;
 .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;
 }
&lt;/style&gt;
</pre><h3 id="heading-4">页面代码</h3>
<pre style="background-color:#fff">&lt;div class=&#34;wrapper&#34;&gt;
 &lt;div class=&#34;top-wrapper&#34;&gt;
 &lt;img src=&#34;https://www.oyohyee.com/static/img/logo.svg&#34;&gt;
 &lt;/div&gt;
 &lt;div class=&#34;bottom-wrapper&#34;&gt;
 &lt;p&gt;OhYee&lt;/p&gt;
 &lt;/div&gt;
 &lt;div class=&#34;content&#34;&gt;
 &lt;p&gt;打开后可以看到更多详细信息&lt;/p&gt;
 &lt;p&gt;这里也可以放一个图片&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;
</pre>