HTML+CSS实现动态背景登录页面

要实现动态背景登录页面，可以使用HTML+CSS语言来完成。下面是实现过程的详细说明：

步骤 1：准备HTML文件

在HTML文件中，需要包含以下内容：

一个标题，通常是网站的名称
一个表单，用于输入用户名和密码
一个登录按钮

<!DOCTYPE html>
<html>

<head>
  <title>网站名称</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="background"></div>

  <div class="container">
    <h1>网站名称</h1>
    <form>
      <label for="username">用户名:</label><br>
      <input type="text" id="username" name="username"><br>
      <label for="password">密码:</label><br>
      <input type="password" id="password" name="password"><br><br>
      <input type="submit" value="登录">
    </form>
  </div>

</body>

</html>

步骤 2：准备CSS文件

在CSS文件中，需要编写以下样式：

页面中的元素所需的布局样式
背景图片的样式
动态效果的样式

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.container {
  margin-top: 10%;
  text-align: center;
}

form {
  display: inline-block;
  text-align: left;
  padding: 20px;
  background-color: white;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("background.jpg");
  background-size: cover;
  z-index: -1;
  animation: slide 60s linear infinite;
}

@keyframes slide {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

步骤 3：添加背景图片

将需要的背景图片保存在项目文件夹中，并在CSS文件中添加如下样式：

.background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("background.jpg");
  background-size: cover;
  z-index: -1;
  animation: slide 60s linear infinite;
}

其中，background.jpg是你所使用的图片文件的文件名。

步骤 4：添加动态效果

动态效果可以使用 CSS 动画实现。在 CSS 文件中添加以下样式：

@keyframes slide {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

这段代码定义了一个从左上角到右下角再到左上角的循环动画效果。

现在，你的动态背景登录页面就完成了。在浏览器中打开 HTML 文件，你就可以看到它的效果了。

示例 1：多张图片动态轮播背景

可以使用CSS3的属性animation和@keyframes实现多张图片动态轮播背景：

.background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("background1.jpg"), url("background2.jpg"), url("background3.jpg");
  background-size: cover;
  z-index: -1;
  animation: slideshow 60s linear infinite;
}

@keyframes slideshow {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%;
  }
  50% {
    background-position: 0% 0%, 0% 100%, 0% 0%;
  }
  100% {
    background-position: 0% 0%, 0% 100%, 0% 100%;
  }
}

如上代码，background1.jpg、background2.jpg和background3.jpg是你选择的图片文件名，使用逗号隔开。在@keyframes中，分别控制三张图片的轮播效果，从左上角到右下角再到左上角。

示例 2：背景图背后渐变效果

将渐变效果层以蒙板的方式放到背景图层的上面，再通过CSS3变换，让蒙板图层缩小至0，从而达到背景图背后的渐变效果：

.background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("background.jpg");
  background-size: cover;
  z-index: -1;
}

.background::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.8));
  opacity: 1;
  z-index: -1;
  transform: scale(1);
  transition: transform 1s 1s;
}

.background.fade::before {
  transform: scale(0);
  transition: transform 1s;
}

通过伪元素::before实现了蒙板效果，充当背景图层上层的蒙板图层，渐变效果来自线性渐变函数。在.background.fade::before中，添加了transition来控制蒙板图层的显示和隐藏，transition加上时间延迟的话，再将蒙板图层缩小，就实现了效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML+CSS实现动态背景登录页面 - Python技术站