📌  相关文章
📜  如何使用 HTML 和 CSS 制作照片滑动效果?

📅  最后修改于: 2021-08-29 13:10:33             🧑  作者: Mango

这是一种使用 HTML 和 CSS 创建的简单而惊人的动画效果,其中照片像滚轮一样一张一张地水平移动。当鼠标指针出现在照片上时,特定照片将停止移动。

方法:这些动画的基本思想来自于CSS动画的悬停效果。让我们看看代码是如何工作的。

HTML 代码:照片将使用 HTML 在圆环中移动。为了创建动画,我们使用了一个“div”和一个部分来正确维护照片的区域,并且在 CSS 代码中使用了类名。我们为将在页面中显示的照片使用了 HTML图形img 标签。

HTML


  

    
        
            
                
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                
            
        
    
  


HTML


  

    
  

  

    
        
            
                
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                
            
        
    
  


CSS 代码:让我们谈谈代码的 CSS 部分。使用了一些基本属性,如边距、填充、位置、浮动、边框、动画等,这将帮助照片为它们提供正确的位置。它有助于在 2D 中旋转照片。首先它绕着自己的轴旋转。然后整个“div”围绕其轴旋转。

要创建此动画,请使用figure:nth-child(“no. of child”)属性。 transform:rotateY(amount of deg)translateZ(–px)是 CSS 的两个属性,有助于旋转对象。


最终代码:在本节中,我们将结合以上两节(HTML 和 CSS)代码。

HTML



  

    
  

  

    
        
            
                
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                    
                                             
                
            
        
    
  

输出: