📜  语义 UI 缩放转换

📅  最后修改于: 2022-05-13 01:56:26.520000             🧑  作者: Mango

语义 UI 缩放转换

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

语义 UI 过渡是一种动画,用于使用语义 UI 过渡方法将网页内容移入或移出视图。

语义 UI 缩放转换可以将网页元素缩放到远处的视图中。要将缩放转换添加到语义 UI 中的任何 div 或 HTML 元素,我们使用带有“zoom”参数的.transition()函数。这使得元素在屏幕外时放大,如果在屏幕上则缩小。

句法:

$('.selector').transition('zoom');

示例 1:以下示例演示了语义 UI 在 h1 元素中的缩放过渡。

HTML


  

    Semantic UI zoom transition
        
      



      
     
                    

GeeksforGeeks

        Semantic UI zoom transition
        
             
                        


HTML


  

    Semantic UI zoom transition
    



    
        

GeeksforGeeks

        Semantic UI zoom transition
                              
             
                            


输出:

语义 UI 缩放转换

示例 2:以下代码演示了图像元素中语义 UI 的缩放过渡。

HTML



  

    Semantic UI zoom transition
    



    
        

GeeksforGeeks

        Semantic UI zoom transition
                              
             
                            

输出:

语义 UI 缩放转换

参考链接: https ://semantic-ui.com/modules/transition.html#zoom