CSS微动画 - 卡片简约动态效果，翻转是另一种感觉～

Q: 484开始有点词穷了？
A: 写程序还是比写文章有灵感呐..

继上一篇後，要来为卡片创作出另一种效果～跟上一篇有点类似，但因为程序码有诸多地方不一样，所以另外拿出来写～

卡片样式跟上一篇一样～换个颜色～换个感觉

<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(90deg, #fc00ff, #00dbde);
    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%;
    overflow: auto;
    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>

今天来做翻转效果

这次的效果正面只要留标题，在:hover时翻转卡片显示内容。.card在转的时候.card-txt也要记得转，不然文字会反过来哦！

<style>
  .card {
    transition: .3s;
  }
  .card-txt {
    display: none;
  }
  .card:hover {
    transform: rotateY(180deg);
  }
  .card:hover .card-title {
    display: none;
  }
  .card:hover .card-txt {
    display: block;
    transform: rotateY(180deg)
  }
</style>

最後让文字晚一点淡入就大功告成了

<style>
  .card:hover .card-txt {
    animation: fadeIn .3s;
    animation-delay: .2s;
    animation-fill-mode: backwards;
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
      transform: translateY(20px) rotateY(180deg);
    }
    100% {
      opacity: 1;
      transform: translateY(0) rotateY(180deg)
    }
  }
</style>

本篇的卡片动态效果，除了使用transition以外，运用了animation让卡片有完全不一样的风格。

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