css 展开收起动画

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

至少零下七度

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

阅读量5k

点赞数 3

文章标签： css3 css

本文链接：https://blog.csdn.net/mqq_12/article/details/118903762

版权

本文深入探讨了CSS中的关键帧动画`@keyframes`，通过示例展示了如何创建滑动下拉效果。同时，介绍了`.select-open`和`.select-close`选择器在控制元素状态变化中的应用，包括过渡和变换属性。文章详细解析了不同阶段的变换比例，为前端开发者提供了实用的动画实现技巧。

摘要由CSDN通过智能技术生成

@keyframes slide-down{
  0%{transform: scale(1,0);}
  25%{transform: scale(1,1.2);}
  50%{transform: scale(1,0.85);}
  75%{transform: scale(1,1.05);}
  100%{transform: scale(1,1);}
}
.select-open{
  animation: slide-down .5s ease-in;
  transition:  .3s ease-in;
  transform-origin: 50% 0;
}
.select-close{
  transform: scaleY(0);
  transition: transform 0.2s;
  transform-origin: top center;
}