实现卡片的展开缩放动画

最新推荐文章于 2024-07-02 16:31:14 发布

SuperHaker~

最新推荐文章于 2024-07-02 16:31:14 发布

阅读量363

点赞数 3

分类专栏： css笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_53315593/article/details/139636805

版权

css笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原理，外层包裹一个元素，子元素分别是展开和收起的元素，然后对展开的元素添加动画，动画内容是随时间变化，将卡片的transform：rotateX属性进行调整，因为改变的是子元素的旋转，父元素高度并没变，不会影响列表大体布局。

.rotate-down {
  transform-origin: 50% 0%;
  animation: rotateDown 0.3s;
}
.rotate-up {
  transform-origin: 50% 100%;
  animation: rotateUp 0.3s;
}
@keyframes rotateDown {
  0% {
    transform: rotateX(90deg);
    opacity: 0.2;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

@keyframes rotateUp {
  0% {
    transform: rotateX(-90deg);
    opacity: 0.2;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}