模仿window系统登录界面-html代码-BFW代码库

模仿window系统登录界面

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  * {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: ##fff5f3;
  background-image: url('http://repo.bfw.wiki/bfwrepo/image/5df879813a5ac.png'), url('http://repo.bfw.wiki/bfwrepo/image/5df879813a5ac.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_326,h_217,/quality,q_90');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: all 0.4s;
}

.background.zoom {
  transform: scale(1.05);
}

.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.profile-avatar {
  margin-bottom: 16px;
  height: 88px;
  width: 88px;
  background-color: rgba(0, 0, 0, 0.75);
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAEnQAABJ0BfDRroQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAOjSURBVHic7Zrva1ZlGMev2yXN1l6U0VxJDiuNMXAshkFTQZTCLfsBEiJZwzeCDKUXgYQiSET/QwRNLRUER9LLfKGIJaESsRVFpmRsVPvlnKvJxxfnhON6zvY85z7Xc84T3R94XlzPON/v97rPec59n/tMJBAIBAKBQCDw/8TlaQa0i8hWEekSkWYReTz+04iI/C4i50TkC+fclTxzVRXAAW8CQ1TOILANyPUEmQM8A1xK0bjmG+DpovvwAugBJjI0/y8TQE/R/aQC2ADMJDQzDfQDrwMrgUfiz0rgDeAIcCfhuBlgfdF9VUTczB8JTZwAVlRwfAtwMuH4EaAlhxb8IbrhXVTB/wH6PLT2xsfO5Xw1cpsBbE84c+9k0OtN0NtmGNmO+OwPqrBHDXSPK83vLfKaA3SqoLeBJwx0n6L0xthhkVlEZJGVkIi8ouoB59zNrKLOuesiMlDGyxvLAVin6tOG2noAzKZEywF4UtXfGmprLe1VPMCk+p0+bKjdqLQnrLQtr4DFqsZQu5yXN5YDMKrqzDPAAlp/WglbDsAPqjabqkTk+TJe3lgOwCVVv2ao/WoZr+IBXlA3qr+BVQa6rZQ+E3RaZDYFWJSwFD5loDugl8LU6k4RsItS9mXQezdBr9cysylAHfC1Cmz5OHwBsLxv2QOsBsYTzlzWDZFR4Nk8esgMsIXkra1p4DNgJ9HNrT7+tMbffb7AcS8X3VcqgE3AWEIzaRkFNhbdjxdEU2PS5milzABri+4jNUQPLwexuQLGgANAY9F9VQTQDQwbNK4ZBrqL7m9eiPYEPwDuztPAX8CnRDe7TqCJ++8FmuLv3iZ6bzA6j8YscJhaWwgRzf+fzBP6O2AH8GAKvXrgLaJVXxIfUyvrgfjMH0sIeQvYA9Rl0K4D+oCpBP3+mrgS4ktS8wvQZujRFmtqDll5+AZ7idLf/FXAfM8OWB5rz2UW2GztVWmgBuCGCvRbNZqf47kM+Fl5XgceqpbnQmE+UkEmgTU5+K6i9Fnjw2r76hDNROvzuXg/9nr4v6+8p4GmvPwF2K8CDAEP5Ojf.........完整代码请登录后点击上方下载按钮下载查看