探索无限风景：用CSS3打造灵动动画，随心所欲控制暂停

前端

2023-06-12 11:56:30

如何使用 CSS3 动画和鼠标悬停打造无限移动的风景

创建生动的网页交互

在当今的数字世界中，吸引用户并让其参与是至关重要的。CSS3 动画已成为前端开发人员手中的利器，让其能够创建令人惊叹的交互式网页。其中一个引人注目的应用就是构建无限移动的风景，为您的网页增添一丝动感和趣味。

第一步：准备背景图片

为了开始，您需要一张高分辨率的背景图片，作为无限移动风景的基础。从网上下载或使用您自己的照片，确保图像不会在放大或缩小时失真。

第二步：编写 CSS3 动画代码

接下来，是 CSS3 动画代码发挥作用的地方。使用以下属性控制动画：

animation-name： 动画名称
animation-duration： 持续时间
animation-iteration-count： 重复次数
animation-timing-function： 过渡效果

代码示例：

@keyframes move {
  from {
    background-position: 0% 0%;
  }
  to {
    background-position: 100% 100%;
  }
}

#background {
  animation-name: move;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  background-image: url("path/to/image.jpg");
}

第三步：将 CSS 代码添加到 HTML 代码

将 CSS 代码与 HTML 代码结合起来，以便在网页上显示风景。使用 <style> 或 <link> 标签引入 CSS。

代码示例：

<html>
<head>
  <style>
    @keyframes move { ... }
    #background { ... }
  </style>
</head>
<body>
  <div id="background"></div>
</body>
</html>

第四步：添加鼠标悬停事件

为增添互动性，您可以在鼠标悬停时暂停无限移动。使用 JavaScript 事件监听器实现这一功能。

代码示例：

var background = document.getElementById("background");

background.addEventListener("mouseover", function() {
  this.style.animationPlayState = "paused";
});

background.addEventListener("mouseout", function() {
  this.style.animationPlayState = "running";
});