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