So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt auf Webseiten-CSS-Tutorial-php.cn

So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt auf Webseiten

PHPz

Freigeben： 2023-10-24 09:02:25

Original

1411 Leute haben es durchsucht

So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt auf Webseiten

So erzielen Sie mit reinem CSS einen reibungslosen Scroll-Hintergrundeffekt von Webseiten

Hintergrund ist ein sehr wichtiger Teil des Webdesigns, der den visuellen Effekt und die Benutzererfahrung der Seite verbessern kann. Herkömmliche Webseitenhintergründe sind normalerweise statisch, aber durch die Verwendung reiner CSS-Technologie können wir einen sanften Scroll-Hintergrundeffekt erzielen und so der Webseite einen dynamischeren und lebendigeren visuellen Effekt verleihen. In diesem Artikel stellen wir vor, wie Sie mit CSS einen sanften Bildlauf-Hintergrundeffekt erzielen, und stellen spezifische Codebeispiele bereit.

1. Vorbereitung

Bevor wir mit der Implementierung des Smooth-Scrolling-Hintergrundeffekts beginnen, müssen wir einige grundlegende HTML- und CSS-Codes vorbereiten. Zuerst müssen wir eine einfache HTML-Datei erstellen und dann eine CSS-Datei darin einfügen, damit wir Code in die CSS-Datei schreiben können, um den Hintergrundeffekt des sanften Scrollens zu erzielen. Hier ist ein Beispiel für eine einfache HTML-Struktur:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="background"></div>
  <div class="content">
    <!-- 网页内容 -->
  </div>
</body>
</html>

Nach dem Login kopieren

Im obigen Beispiel haben wir eine Hintergrundebene (div.background) und eine Inhaltsebene (div.content</code >) erstellt. , die Hintergrundebene wird verwendet, um einen sanften Scroll-Hintergrundeffekt zu erzielen, und die Inhaltsebene wird zum Platzieren anderer Webinhalte verwendet. <code>div.background）和一个内容层（div.content），背景层将用来实现平滑滚动背景效果，而内容层将用来放置其他网页内容。

二、实现平滑滚动背景效果

接下来，让我们来编写CSS代码，实现平滑滚动背景效果。以下是代码示例：

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 占满整个可视区域 */
  background-image: url(background.jpg); /* 背景图片路径 */
  background-size: cover; /* 背景图片适应屏幕尺寸 */
  background-position: center; /* 背景图片居中显示 */
  z-index: -1; /* 确保背景层在内容层下方 */
  animation: scrollBackground 30s linear infinite; /* 启用滚动动画 */
}

@keyframes scrollBackground {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(50%);
  }
}

Nach dem Login kopieren

在上面的CSS代码中，我们首先将网页的body元素的overflow属性设为hidden，以隐藏滚动条。然后，我们使用position: fixed将背景层固定在视口中，width: 100%和height: 100vh将背景层的大小设置为和可视区域一样，background-image和background-size属性用来指定背景图片的路径和缩放方式，background-position属性用来控制背景图片的位置。最后，我们使用animation属性将滚动动画应用到背景层上，其中scrollBackground是我们定义的动画名称，30s表示滚动一次的时间，linear表示动画的过渡方式是线性的，infinite表示动画无限循环播放。在动画的@keyframes规则中，我们使用transform属性的translateY

2. Erzielen Sie einen sanften Bildlauf-Hintergrundeffekt

Als nächstes schreiben wir CSS-Code, um einen reibungslosen Bildlauf-Hintergrundeffekt zu erzielen. Das Folgende ist ein Codebeispiel:

rrreee

Im obigen CSS-Code setzen wir zunächst das Attribut overflow des Elements body der Webseite auf hidden, um die Bildlaufleiste auszublenden. Dann verwenden wir <code>position: Fixed, um die Hintergrundebene im Ansichtsfenster zu fixieren, und width: 100% und height: 100vh, um die Größe festzulegen der Hintergrundebene Wie der sichtbare Bereich werden die Attribute background-image und background-size verwendet, um den Pfad und die Skalierungsmethode des Hintergrundbilds background anzugeben -position Eigenschaften werden verwendet, um die Position des Hintergrundbilds zu steuern. Schließlich verwenden wir das Attribut animation, um die Scroll-Animation auf die Hintergrundebene anzuwenden, wobei scrollBackground der Name der von uns definierten Animation und 30sist > bedeutet einmaliges Scrollen, linear bedeutet, dass der Animationsübergang linear ist, infinite bedeutet, dass die Animation in einer Endlosschleife abgespielt wird. In der @keyframes-Regel der Animation verwenden wir die Funktion translateY des Attributs transform, um den vertikalen Scrolleffekt zu erzielen.

3. Probieren Sie den Effekt aus

Nach Abschluss des obigen Codes können wir die HTML-Datei im Browser öffnen, um den erzielten Hintergrundeffekt für sanftes Scrollen anzuzeigen. Während Sie durch die Seite scrollen, wird die Hintergrundebene in einem sanften Scrollmodus angezeigt, sodass Sie das Gefühl haben, dort zu sein. 🎜🎜Zusammenfassung🎜🎜Durch reine CSS-Technologie können wir problemlos den reibungslosen Scroll-Hintergrundeffekt von Webseiten erzielen. Mit nur wenigen Zeilen CSS-Code können Sie Ihrer Webseite einen dynamischen und lebendigen visuellen Effekt hinzufügen. Ich hoffe, dass der Inhalt dieses Artikels Ihnen helfen kann, und ich wünsche Ihnen, dass Sie einen zufriedenstellenden, sanften Scroll-Hintergrundeffekt erzielen können! 🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundeffekt auf Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!