Semantic-UI 静态脉冲动画

Semantic UI 是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

Semantic UI 中的动画用于将 Web 内容动画化进出视口。静态动画在语义 UI 中用于吸引用户注意可见性、外观、突出显示元素或提供反馈。它们不依赖于用户与网页的交互并且是预先确定的。 Semantic UI 为我们提供了多种静态动画，包括 Jiggle、Flash、Shake、Pulse、Tada、Bounce、Glow。

在本文中，我们将了解和了解语义 UI 静态脉冲动画以及实现和示例代码。

语义 UI 静态脉冲动画：语义 UI 静态脉冲动画用于通过对要设置动画的元素进行脉冲来吸引用户对可见性的注意。

句法：

$('.image').transition('pulse');

示例 1：调用函数时，只要单击按钮，我们就可以观察到元素的脉动。

HTML

  

    Semantic UI pulse animation
    
    
    
    
    

  

    
        
            
                Geeksforgeeks
            
              
            Static pulse Animation
            
              
            
            
  
            
                Static pulse Animation
            
        
    
  
    
        $('button').click(function () {
            $('.image').transition('pulse');
        })
    

  

输出：

Semantic-UI 静态脉冲动画

示例 2：当图像悬停时，将调用该函数，我们可以观察语义 UI 静态脉冲动画。

HTML

  

    Semantic UI Pulse animation
    
    
    
    
    
      
    
        body {
            margin: 20px;
        }
    

  

    
        
            Geeksforgeeks
            Static Pulse Animation
            
            
            
        
    
  
    
        $('img').mouseover(function () {
            $('.image').transition('pulse');
        })
    

  

输出：

Semantic-UI 静态脉冲动画

参考： https ://semantic-ui.com/modules/transition.html#pulse