21.脉冲加载器 & 弹出菜单

脉冲加载器

使用 animation-delay 属性创建一个脉冲效果的加载器动画。

• 使用 @keyframes 在周期的两个点定义动画。在开始(0%)时,两个 <div> 元素没有 width 或 height,并位于中心。在结束(100%)时,两个 <div> 元素的 width 和 height 都增加了,但它们的 position 被重置为 0。
• 在动画中使用 opacity 从 1 过渡到 0,以在 <div> 元素扩展时给它们一个消失的效果。
• 为父容器 .ripple-loader 设置预定义的 width 和 height,并使用 position: relative 来定位其子元素。
• 在第二个 <div> 元素上使用 animation-delay,这样每个元素都在不同的时间开始动画。

<div class="ripple-loader"&g