数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 CSS 中创建多个背景图像视差效果？
视差滚动是一种常用的设计技巧，可以为网页添加动感和深度。这是通过以不同的速度移动单独的页面元素来模拟平面上的深度效果来实现的。使用 CSS 中的多个背景图像是一种独特而富有创意的方法来实现此技术。在本文中，我们将探讨如何在 CSS 中创建多背景图像视差效果，包括设置 HTML 结构的步骤以及创建所需效果所需的 CSS 样式。无论您是初学者还是经验丰富的前端开发人员，本指南都将为您提供创建网站上令人惊叹的多背景图像视差效果所需的知识和工具。
语法
element {
background-image: url(image-location.jpg);
}
background-image 属性
CSS 中的 background-image 属性用于指定一个或多个要作为 HTML 元素背景使用的图像。这提供了将一个或多个图像用作元素背景的功能。图像可以位于元素的特定区域，可以设置为水平或垂直重复，或者可以调整大小以覆盖整个元素或其一部分。
element {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}
动画属性
CSS 动画属性提供了在 HTML 元素上创建动画的功能，无需 JavaScript 的帮助。此属性使您能够指定一系列描述元素在给定时间段内如何更改的关键帧。这些关键帧用于指定元素在不同时间点的样式，而动画属性控制元素如何从一个关键帧过渡到另一个关键帧。
以下是动画属性每个组成部分的简要说明：
名称 - 动画的名称，用于在 @keyframes 规则中引用它。
持续时间 - 动画的持续时间，表示动画完成需要持续多长时间，以时间字符串值（例如“5s”）秒表示。
时间函数 - 动画的速度曲线，可以将其设置为线性、缓动、缓入、缓出、缓入缓出或自定义 cubic-bezier 函数。
延迟 - 开始动画之前的延迟时间，以秒为单位（例如，“2s”）。
迭代次数 - 动画应执行的迭代次数，或术语“无限”以指示动画应无限循环。
方向 - 动画的方向，可以是“normal”以正常方向开始，“reverse”以相反方向开始，或“alternate”以交替向前和向后开始。
填充模式 - 指定如何填充动画的非活动状态，选项包括“none”、“forwards”、“backwards”或“both”。
播放状态 - 指示动画是处于运动状态还是暂停状态，分别由值“running”或“paused”表示。
方法
要在 CSS 中使用多个背景图像创建视差效果，应遵循一系列说明：
提供一个将包含背景图像的容器元素。在本例中，该元素是一个名为 parallax-container 的 div。
定义容器元素的高度和宽度，并将 overflow 属性设置为 hidden。这将确保仅显示图像的可见部分。此外，position 属性设置为 relative 以确保背景图像的位置相对于容器。
为每个背景图像创建单独的元素，并将它们的位置设置为 absolute。这允许您在容器元素内精确放置每个图像。每个元素的高度和宽度都设置为 100%，以便它们填充整个容器。
通过使用 background-image 属性为每个元素设置背景图像。确保为每个单独的图像提供正确的文件路径。
为每个元素创建一个动画，该动画将沿着 X 轴移动背景图像。这是使用 animation 属性结合 @keyframes 规则完成的。translateX 属性用于移动元素，您为该属性设置的值决定了元素在水平方向上移动的距离。
为了保持流畅和连续的动画体验，animation-timing-function 属性被分配了一个线性值，表示在整个过程中动画的持续进展。此外，animation-iteration-count 属性被配置为具有无限值，表示动画无限重复，对循环次数没有预定义的限制。
示例
以下是我们将在此示例中查看的完整代码：
<!DOCTYPE html>
<html>
<head>
<title>How to create multiple background image parallax in CSS?</title>
<style>
.parallax-container {
height: 200px;
width: 100%;
overflow: hidden;
position: relative;
}
.layer-1,
.layer-2,
.layer-3 {
background-position: center;
background-size: cover;
position: absolute;
height: 200px;
width: 100%;
}
.layer-1 {
background-image: linear-gradient(red,orange);
animation: move-layer-1 15s linear infinite;
}
.layer-2 {
background-image: linear-gradient(blue,lightblue);
animation: move-layer-2 20s linear infinite;
}
.layer-3 {
background-image: linear-gradient(green,lightgreen);
animation: move-layer-3 25s linear infinite;
}
@keyframes move-layer-1 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-30%);
}
}
@keyframes move-layer-2 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-60%);
}
}
@keyframes move-layer-3 {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-90%);
}
}
</style>
</head>
<body>
<h4>How to create multiple background image parallax in CSS?</h4>
<div class="parallax-container">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-3"></div>
</div>
</body>
</html>
结论
总之，在 CSS 中创建多层背景图像视差效果是一种简单而强大的技术，可以为您的网站添加维度和动画。通过遵循本文中描述的说明，您可以为您的观众创造一种视觉上令人愉悦且引人入胜的体验，这种体验将被长期铭记。无论您的设计目标是基本的还是复杂的，CSS 的灵活性都使您可以根据您的特定需求定制您的设计。因此，为什么不踏上这段旅程并探索设计潜力以获得显著成果呢！
2K+ 次查看
