Semantic-UI 静态发光动画

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

为了将 Web 内容转换进出视口，我们使用动画。静态动画是可预测的和预先确定的，用于通过改变可见性、位置等来吸引用户的注意力，一般来说，它们不受用户动作的控制。 Semantic UI 为我们提供了许多静态动画的变体，包括 Jiggle、Flash、Shake、Pulse、Tada、Bounce、Glow。

在本文中，我们将使用示例代码了解语义 UI 静态发光动画及其实现。

Semantic UI Static Glow Animation： Semantic UI Static Glow Animation 抓住用户的注意力，并通过发光突出要设置动画的元素的位置。

句法：

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

示例 1：每当单击按钮时，都会调用transition()函数并且元素会发光。

HTML

    Semantic UI Glow animation
    
     
    
    
    

  

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

输出：

示例 2：只要我们将鼠标悬停在图像上，就会调用transition()函数并可以观察到发光动画。

HTML

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

  

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

输出：

参考链接： htps://semantic-ui.com/modules/transition.html#glow