利用css实现视差滚动和抖动效果

作者：System 时间：2024年08月19日分类：所有,css3 字数：1266

视差滚动和抖动效果可以通过CSS的background-attachment: fixed属性来实现，该属性会让背景图像固定，不会随着页面的其余部分滚动。

以下是一个简单的实现视差滚动效果的例子：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .parallax {
    background-image: url('background.jpg'), url('foreground.jpg');
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, scroll;
    background-size: cover, contain;
    height: 100%;
  }
</style>
</head>
<body>
<div class="parallax">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>
</body>
</html>

在这个例子中，.parallax 类的元素拥有两个不同的背景图像，一个是固定的（视差滚动效果），另一个是可滚动的。

抖动效果可以通过使用CSS的@keyframes规则和animation属性来实现。以下是一个简单的实现抖动效果的例子：




@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  75% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}
 
.shake-animation {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

在这个例子中，.shake-animation 类的元素将会不断地左右抖动。

利用css实现视差滚动和抖动效果

评论已关闭

推荐阅读