CSS微动画 - 卡片简约动态效果，低调的小心机

Q: 剩下 5 篇来点实用也不实用的范例吧～～
A: 毕竟效果还是要看设计的美感，这是很看天份的（望天

今天的主题是「卡片」。在有些形象网站中可以看到产品或是功能的介绍卡片，通常会是以图片加标题为预设样式，在对卡片进行操作时才显示完整内容，这样的样式只要好好掌握伪类:hover或:active以及伪元素::before或::after就可以让画面美美的罗～

卡片样式先出来

第一步先将展开的样式做出来～～

<style>
  .container {
    display: flex;
    justify-content: space-between;
  }
  .card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 400px;
    padding: 10px 20px;
    border-radius: 10px;
    background: linear-gradient(#00b09b, #96c93d);
    box-shadow: 0 0 20px 1px Gray;
  }
  .card-title {
    color: white;
    text-align: center;
    line-height: 2;
    font-size: 32px;
    text-shadow: 0 0 2px Lightgray;
  }
  .card-txt {
    color: WhiteSmoke;
    height: 80%;
    width: 100%;
    line-height: 32px;
  }
</style>

<div class="container">
  <div class="card">
    <div class="card-title">First Title</div>
    <div class="card-txt">Detail~</div>
  </div>
  <div class="card">
    <div class="card-title">Second Title</div>
    <div class="card-txt">Detail~</div>
  </div>
  <div class="card">
    <div class="card-title">Third Title</div>
    <div class="card-txt">Detail~</div>
  </div>
</div>

希望预设只有显示标题

由於希望是内容是展开的方式呈现，这里的做法不能使用display: none，如果有下过transition的朋友们应该会知道display是没有渐变的！display是状态的改变，none跟block之间并没有渐变的过程。

希望达到展开的效果这里使用的是height、overflow、opacity，让.card-txt的高度为0，并以overflow: hidden隐藏超出容器的内容。

<style>
  .card-txt {
    height: 0;
    overflow: hidden;
    opacity: 0;
  }
</style>

伪类很重要！

当:hover到.card时让内容高度显示，并修改透明度，对标题也做了点小小的变化～

<style>
  .card:hover .card-title {
    text-shadow: 1px 1px 5px DimGray;
  }
  .card:hover .card-txt {
    height: 80%;
    opacity: 1;
    overflow: auto;
  }
</style>

transition是关键

让.card-txt的height、opacity都以0.3秒的时间渐变就完成啦！也因为有给.card-txt下overflow: auto以及高度，所以就算文字超长超过容器也是没有关系的！

<style>
  .card-txt {
    transition: all .3s;
  }
</style>

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！