📜  CSS |脉冲动画

📅  最后修改于: 2021-11-09 09:06:15             🧑  作者: Mango

CSS Pulse Animation Effect 为元素提供脉动效果,改变其形状和不透明度。根据时间和需要,使用不同的@keyframes来实现此动画。简单而强大的效果使网站更具活力、色彩和吸引力。这个动画是完全没有使用 JavaScript 实现的。

例1:下面的例子显示了一个向外的脉冲块,当它达到最大尺寸时会自我伸展并收缩,以圆形开始,以方形结束,每次改变形状时都会出现不同的颜色。



  

    
        CSS | Pulse animation
    
      
    

  

    
  

输出:

例 2:下面的例子显示了一个向内或反向脉冲生成动画效果在一个圆圈上,在效果完成后给出向内的圆形脉冲。它扩展回其原始状态并且效果继续发生。



  

    Reverse Pulse 
    
          
    

  

    
  

输出: