在这个项目中,我们将仅使用 HTML 和 CSS 创建一个简单的水平滚动捕捉。
项目概况:
方法:为 HTML 对象设置动画的最佳方法是使用 CSS 类并在不同阶段设置过渡。
HTML代码:
- 创建一个 HTML 文件 (index.html)。
- 将提供所有动画效果的 HTML 中的 CSS 文件链接到我们的 HTML。这也位于 标记之间。
- 添加六个锚 标记以创建按钮并为它们分配特定的类。
HTML
style.css
*{
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;
}
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;
}
输出: