如何使用 HTML 和 CSS 创建水平滚动捕捉？

在这个项目中，我们将仅使用 HTML 和 CSS 创建一个简单的水平滚动捕捉。

项目概况：

方法：为 HTML 对象设置动画的最佳方法是使用 CSS 类并在不同阶段设置过渡。

HTML代码：

• 创建一个 HTML 文件 (index.html)。
• 将提供所有动画效果的 HTML 中的 CSS 文件链接到我们的 HTML。这也位于 标记之间。
• 添加六个锚 标记以创建按钮并为它们分配特定的类。

HTML

    
    
       
    


    
Horizontal Scroll Snap
    

    
    
        
    
    
    
        
    
    
    
        
    
    
    
        
    
    
    
        
    
    
    
        
    
    

---

CSS 代码：以下是上述 HTML 代码中使用的“style.css”文件的内容。 CSS 用于为我们的 HTML 页面提供不同类型的动画和效果，使其看起来对所有用户都具有交互性。

• 恢复所有浏览器效果。
• 使用类和 id 为 HTML 元素赋予效果。

样式文件

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
body{
    background-color: rgb(4, 84, 23);
}
  
h1{
    position: absolute;
    top: 0;
    margin: 3em;
    left: 37%;
    margin-left: 0;
}
  
.main_box{
    margin: 0 auto;
    margin-top: 15em;
    display: grid;
    grid-auto-flow: column;
    padding: 1em;
    gap: 1em;
    height: 15em;
    width: 30em;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
}
  
.main_box > a{
    scroll-snap-align: center;
}
  
.main_box img{
    width: 12em;
    max-width: none;
    object-fit: contain;
    border-radius: 1em;
}

输出：

水平滚动捕捉