使用 HTML 和 CSS 的网页动画创意

直接和简单的网页是好的，但不是最好的。动画是为静态页面带来生命力并使其更引人注目的东西。

以下是一些使用 HTML 和 CSS 等前端语言为您的网页制作动画的想法。

1、轮换牌：第一个是轮换牌。卡片有正面和背面两部分，当我们将鼠标悬停在卡片上时，它会旋转 180 度，并且只会显示背面。

说明：这里第一个全身是样式的图像。该按钮的样式根据您的需要和创造力进行设计。这里的主要内容是首先旋转背面隐藏或旋转 180 度，当我们悬停到卡上时，正面旋转 -180 度，背面进入正面。

下面是说明旋转卡片动画的示例。

例子：

HTML

  

    

  

    

        

  
            
            

                
            
  
            
            

                
                    Read More
                
            
        
    

  

输出：

旋转卡

2. 文字上下移动：在这个动画中，当鼠标悬停在文字上时，文字会向上移动，如果是移动点击，文字会向上移动。

说明：首先，使用溢出隐藏和底部负值覆盖向下文本。当我们将鼠标悬停在卡片中时，前面的文本会使用 translateY 负值向上上升，而向下的文本则通过将底部值设为零来显示。线性梯度用于清晰地阅读文本。过渡起着重要作用，因为它使事情进展顺利。其余的代码仅用于样式设置和使事情变得更好。

下面是说明文本上下移动动画的示例。

例子：

HTML

  

    

  

    

        

            

                
Geeks For Geeks
            
  
            

                
Geeks For Geeks
  
                

                    A Computer Science portal for geeks.
                    A Computer Science portal for geeks.
                    A Computer Science portal for geeks.
                
  
                Read More
            
        
    

  

输出：

3. 悬停时出现的文字：在此动画中，文字悬停在图像上并且图像被放大。

说明：第一个是使文本消失，这是通过使不透明度为零来完成的。现在，在悬停图像时，图像将被缩放，溢出隐藏属性确保缩放时图像的外部不会超出特定的高度和宽度。在悬停时使图像文本的不透明度使其可见。过渡属性只是让事情变得更顺畅。

下面的示例说明了悬停动画上出现的文本。

例子：

HTML

  

    

  

  
    

        

            

                
                

                    
GeeksforGeeks
  
                    

                        It is a computer Science
                        portal for geeks.
                    
                
            
        
    
  

  

输出：