类似materialdesign的样式显示CSS中的过渡

MaterialDesign-like reveal transition in CSS

本文关键字：CSS 显示 materialdesign 样式 类似      更新时间：2023-09-26

我正在寻找一种简单直观的方法来设计CSS/JS视图过渡，如在谷歌MD指南中所示:https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B3T7oTWa3HiFZ3BiM1dnR0ZPU1k/animation_meanigfultrans_visualcont.webm

是否有任何web框架或库可以帮助开发这些过渡的布局?

有几件事你可以做，或多或少的成就:

  1. 使用固定宽度/高度的div，边框半径为50%，以在背景中获得波纹。然后使用transform:scale()

    2. 动画化过渡

  2. 使用圆形剪辑路径https://css-tricks.com/almanac/properties/c/clip/

  3. 使用聚合物由谷歌https://www.polymer-project.org/1.0/

你也可以使用velocity.js来实现动画完成时的事件。http://julian.com/research/velocity/

相关文章：