Semantic-UI 列表动画变化

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

Semantic-UI 列表为我们提供了列表的不同变体，例如 Horizontal 、 Inverted、Selection、Animated、Relaxed、Divided、Celled 和 Size 变体。在这里，我们将了解 Semantic-UI List Animated Variation 用于在列表的选定项目上应用一些动画效果。

Semantic-UI 列表动画变化类：

• 动画：该类用于在鼠标悬停时为列表项添加动画效果。

句法：

    
 Contents... 
    ...

示例 1：在此示例中，我们正在创建具有动画变化的项目列表。

HTML

  

    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Semantic-UI List Animated Variation
  
        

            
GeeksforGeeks
            Data Structure
            Algorithm
            Interview Preparation
            Competitive Programming
            Machine Learning
            Web Development
        
    

  

输出：

Semantic-UI 列表动画变化

示例 2：在此示例中，我们正在创建具有动画变化的项目列表。

HTML

  

    
  
    

  

    

        

            GeeksforGeeks
        
  
        
Semantic-UI List Animated Variation
  
        

            

                
                

                    
GeeksforGeeks
                    

                        A Computer Science portal for geeks. It contains 
                        well written, well thought and well explained
                        computer science and programming articles
                    
                
            
            

                
                

                    
Data Structure
                    

                        A data structure is a particular way of 
                        organizing data in a computer so that it 
                        can be used effectively.
                    
                
            
            

                
                

                    
Algorithm
                    

                        The word Algorithm means “a process or set 
                        of rules to be followed in calculations or 
                        other problem-solving operations”.
                    
                
            
            

                
                

                    
Web Development
                    

                        Web development refers to the building, 
                        creating, and maintaining of websites. 
                        It includes aspects such as web design, 
                        web publishing, ...
                    
                
            
        
    

  

输出：

Semantic-UI 列表动画变化

参考： https://semantic-ui.com/elements/list.html#animated