入门 CSS Toast 动画

Primer CSS是一个免费的开源 CSS 框架，它建立在创建基本样式元素（如间距、排版和颜色）基础的系统之上。这种系统化的方法确保我们的模式是稳定的并且可以相互操作。它的 CSS 方法受到面向对象的 CSS 原则、函数式 CSS 和 BEM 架构的影响。它具有高度可重用性和灵活性。它是使用 GitHub 的设计系统创建的。

Toast用于向用户显示实时反馈。 Toast 动画输入用于使用Toast–animateIn和Toast–animateOut修饰符类为 toast 设置动画。

类中的入门 CSS Toast 动画：

• Toast–animateIn：这个类用于从底部动画吐司。
• Toast–animateOut：这个类用于从底部动画吐司。

句法：

    Content

示例 1：本示例演示了在Toast–animateIn类中使用 Primer CSS Toast 动画。

HTML

  

    
     

  

    

        
 GeeksforGeeks 
        
 Primer CSS Toast animation in 
 
      
      
      

        

            
                
            
          
                GeeksforGeeks Animate In
           
        
    

输出：

入门 CSS Toast 动画

示例 2：此示例演示了使用Toast–animateOut类的 Primer CSS Toast 动画。

HTML

  

    
     

  

    

        
GeeksforGeeks
        
 Primer CSS Toast animation in 
    
    
    

        

            
                
             
            
                GeeksforGeeks Animate Out
             
        
    

输出：

入门 CSS Toast 动画

参考： https://primer.style/css/components/toasts#toast-animation-in