模仿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/.........完整代码请登录后点击上方下载按钮下载查看