├── README.ME
└── Admin_Login
    ├── image
        ├── user1.png
        └── password.png
    ├── css
        └── login.css
    └── index.html


/README.ME:
--------------------------------------------------------------------------------
1 | # Save beautiful web ui for later usage


--------------------------------------------------------------------------------
/Admin_Login/image/user1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rockyzsu/beautiful_web_ui_collection/master/Admin_Login/image/user1.png


--------------------------------------------------------------------------------
/Admin_Login/image/password.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Rockyzsu/beautiful_web_ui_collection/master/Admin_Login/image/password.png


--------------------------------------------------------------------------------
/Admin_Login/css/login.css:
--------------------------------------------------------------------------------
 1 | *{ padding: 0; margin: 0; box-sizing: border-box; user-select: none;}
 2 | li{list-style-type: none;}
 3 | a{text-decoration: none; color: #fff;}
 4 | html{background: #000; height: 100%;}
 5 | body{ background: #000; max-width: 1920px; margin: 0 auto; height: 100%; position: relative;
 6 |   font-family: "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;}
 7 | body::before{ position: absolute; width: 100%; height: 100%; background: url(../images/bg.png) no-repeat left center; content: ""; left: 0; top: 0; z-index: 100; pointer-events: none;}
 8 |   .loginbg{background-image:linear-gradient(300deg,#004491,#1e88e5);position:absolute;width:100%;height:50%;left:0;top:0;z-index:0}
 9 |   .loginav{max-width: 1300px; width: 100%; height: 100%; margin:0 auto;z-index:10;box-shadow:0 0 30px rgba(0,0,0,.1); display: flex; align-items: center;
10 |   justify-content: space-between;}
11 |   .video{ position: absolute;width: 1200px; left: 0px; padding-bottom: 40px; pointer-events: none;}
12 |   .video video{width: 100%;}
13 |   .video::before{ position: absolute; content: ""; width: 200px; height: 100%; background: #000; right: 0; top: 0;}
14 |   .logotit{text-align:center;padding:40px 0;font-size:30px}
15 |   .loginbox{padding:30px 0 50px 0; width: 600px; padding:30px 50px; flex-shrink: 0; position: relative; z-index: 100;}
16 |   .logininput .forminput{border:2px solid rgba(32,163,245,.4);
17 |     font-family: "PingFang SC","Lantinghei SC","Microsoft YaHei","HanHei SC","Helvetica Neue","Open Sans",Arial,"Hiragino Sans GB","微软雅黑",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;
18 |     display:block; padding-left:50px;font-size:18px;color:#fff;width:100%;line-height:48px;outline:0;text-indent:1px; background: rgba(32,163,245,.1);}
19 | 
20 |   input::input-placeholder{color:  #fff;} 
21 |   ::-webkit-input-placeholder {  color: #fff;   } 
22 | 
23 | 
24 |   .flex1{ display: flex; justify-content: space-between; align-items: center;} 
25 | .flex1 label{color: #fff; display: flex; align-items: center;}
26 |   .logininput>li{display:block;padding:15px 0;position:relative;}
27 |   .logininput li>i{ position: absolute; height: 100%; left: 15px; top: 0; display: flex; align-items: center;}
28 |   .logintit{color:#00bff4;text-align:center;position:relative;padding:25px 0;font-size:24px}
29 |   .btn-primary{width: 100%;background:#20a3f5; display: block; text-align: center; color: #fff; line-height: 48PX; font-size: 24px;}
30 |   .btn-primary:hover{background:#137bd6}
31 |   .copyright{position:fixed;width:100%;left:0;bottom:10px;text-align:center;color:#006b95;font-size:12px}
32 |   
33 |   .logo{ position: absolute; top: -120px; width: 100%; left: 0;  text-align: center; color: #fff;}
34 |   .logo h1,
35 |   .logo h2{
36 |     background: linear-gradient( 90deg,#009ef3, #00e9d0);
37 |     background-size: cover;
38 |     -webkit-background-clip: text;
39 |     background-clip: text;
40 |     -webkit-text-fill-color: transparent;
41 |     text-fill-color: transparent;
42 |   }
43 |   .logo h1{ font-weight: bolder; font-size: 48px; font-family: "Microsoft YaHei","HanHei SC";  letter-spacing: 2px;}
44 |   .logo h2{ font-size: 30px; text-transform: uppercase; font-weight: lighter; letter-spacing: 2px;}
45 | 
46 |   .boxall{ border: 2px solid #186baf; background: rgba(32,163,245,.1); position: relative; transform: scale(.7); opacity: 0;  animation: shows 1s forwards;}
47 |   @keyframes shows
48 |   {
49 |       to {transform: scale(1); opacity: 1;}
50 |   }
51 |   .boxall:before,
52 | .boxall:after{ position:absolute; width:30px; height:30px; content: "";  border-top: 3px solid #20a3f5; top: -2px;}
53 | .boxall:before,.boxfoot:before{border-left: 3px solid #20a3f5;left:-2px;}
54 | .boxall:after,.boxfoot:after{border-right: 3px solid #20a3f5; right: -2px;}
55 | 
56 | .boxfoot{ position:absolute; bottom: 0; width: 100%; left:0;}
57 | .boxfoot:before,
58 | .boxfoot:after{ position:absolute; width:30px; height:30px;  content: "";border-bottom:3px solid #20a3f5; bottom:-2px;}
59 | 
60 | 
61 | .aui-checkbox,input[type=radio]{width:24px;height:24px;background: rgba(32,163,245,.1);border:solid 2px rgba(32,163,245,.5);margin:0;padding:0;position:relative;cursor:default;-webkit-appearance:none;-webkit-user-select:none;user-select:none;-webkit-transition:background-color ease .1s;transition:background-color ease .1s; flex-shrink: 0; border-radius: 0;}
62 | .aui-checkbox,input[type=radio]{margin:0 3px 0 0 !important;position:relative;}
63 | .aui-checkbox:checked,
64 | input[type=radio]:checked{text-align:center;background-clip:padding-box;}
65 | .aui-checkbox:checked:after,
66 | .aui-checkbox:checked:before,
67 | input[type=radio]:checked:after,
68 | input[type=radio]:checked:before{content:'';width:10px;height:5px;position:absolute;top:50%;left:50%;margin-left:-6px;margin-top:-5px;background:0 0;border:2px solid #439aff;border-top:none;border-right:none;z-index:2;-webkit-border-radius:0;border-radius:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
69 | .aui-checkbox:disabled,
70 | input[type=radio]:disabled{background-color:#f5f5f;border:solid 1px #ddd}
71 | .aui-checkbox:disabled:after,
72 | .aui-checkbox:disabled:before,
73 | input[type=radio]:disabled:after,
74 | input[type=radio]:disabled:before{content:'';width:.5rem;height:.3rem;position:absolute;top:50%;left:50%;margin-left:-.25rem;margin-top:-.4rem;background:0 0;border:1px solid #fff;border-top:none;border-right:none;z-index:2;-webkit-border-radius:0;border-radius:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
75 | input[type="radio"]{ border-radius: 20px;}
76 | input{outline: none!important;}
77 | .err{
78 | 	color: #e41212;
79 | 	font-size: 18px;
80 | 	text-align: center;
81 | }
82 | 
83 | 
84 | @media (max-width: 1200px) {
85 |   .loginav{justify-content: center;}
86 |   .video{display: none;}
87 |   .loginbox{width: 96%;}
88 |   .logo h1{font-size: 30px;}
89 |   .logo h2{font-size: 20px;}
90 |   .loginbox{padding: 30px;}
91 | }
92 | 


--------------------------------------------------------------------------------
/Admin_Login/index.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <!DOCTYPE html>
  3 | <html lang="en">
  4 | 
  5 | <head>
  6 |     <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  7 |     <meta charset="UTF-8">
  8 |     <title>登录页</title>
  9 |     <link href="./css/login.css" rel="stylesheet">
 10 | </head>
 11 | <body>
 12 |     <div class="loginav">
 13 |         <div class="video"><video src="./image/video.mp4" muted autoplay loop></div>
 14 |         <div class=""></div>
 15 |         <div class="loginbox boxall">
 16 |             <div class="logo">
 17 |                 <h1>数据中心后台登录</h1>
 18 |                 <h2>Account backend login</h2>
 19 |             </div>
 20 |             <div class="logintit">用户登录</div>
 21 |             <form class="layui-form login-bottom" method="POST" action="https://w.uuy2349qwe08.cc/admin/login">
 22 |                 <input type="hidden" name="_token" value="PDn1OV89HNFdDbDRsST0OO6BHnRUdux3ACdpTsjD">
 23 |                 <ul class="logininput">
 24 |                     <li>
 25 |                         <i><img src="./image/user1.png"></i>
 26 |                         <input class="forminput" type="text" name="name" id="name" placeholder="请输入用户名" value="">
 27 |                     </li>
 28 |                     <li>
 29 |                         <i><img src="./image/password.png"></i>
 30 |                         <input class="forminput" type="password" name="password" id="password" placeholder="请输入密码">
 31 |                     </li>
 32 |                     
 33 |                     
 34 |                     <li>
 35 |                         <button id="tijiao" lay-submit="" lay-filter="login" class="btn btnblock btn-lg btn-block btn-primary">登录</button>
 36 |                     </li>
 37 |                 </ul>
 38 |             </form>
 39 |             <div class="boxfoot"></div>
 40 |         </div>
 41 |     </div>
 42 | 
 43 |     <canvas id='canvas'
 44 |         style="position:fixed; width:100%; height:100%; left: 0; top: 0; opacity: .3; pointer-events: none;"></canvas>
 45 | 
 46 |     <script src="https://w.uuy2349qwe08.cc/admin/js/jquery.min.js"></script>
 47 |     <script src="https://w.uuy2349qwe08.cc/vendor/layui/layui.js"></script>
 48 |     <script>
 49 |         layui.use(['table', 'layer', 'element'], function () {
 50 |             var table = layui.table,
 51 |                 element = layui.element,
 52 |                 form = layui.form;
 53 | 
 54 |             $('#tijiao').click(function(){
 55 |                 if($('#name').val() == ''){
 56 |                     layer.msg('请填写用户名', {icon: 5});
 57 |                     return false;
 58 |                 }
 59 |                 if($('#password').val() == ''){
 60 |                     layer.msg('请填写密码', {icon: 5});
 61 |                     return false;
 62 |                 }
 63 |             })
 64 |         });
 65 |         
 66 |         var canvas = document.querySelector('canvas');
 67 |         var ctx = canvas.getContext('2d');
 68 |         var w = window.innerWidth;//获取屏幕宽高
 69 |         var h = window.innerHeight * 2 / 2;
 70 |         canvas.width = w;//将屏幕宽高赋值给canvas
 71 |         canvas.height = h;
 72 |         // canvas.style.cssText += `;width:${w}px;height:${h}px;`;
 73 |         var dots = [];
 74 |         var minScale = 1;//设置圆点的最小缩放
 75 |         var maxScale = 3;//设置圆点的最大缩放
 76 |         var bei = 1;
 77 |         for (var i = 0; i < 300; i += 1) {  //设置白圆点的个数
 78 |             dots.push(new Dot())
 79 |         }
 80 | 
 81 |         render = () => {
 82 |             ctx.clearRect(0, 0, w, h);
 83 |             ctx.fillStyle = 'rgba(26,94,199,.6)';
 84 |             ctx.fillRect(0, 0, w, h);//描绘底层蓝色背景
 85 |             for (var i = 0; i < dots.length; i += 1) {
 86 |                 var dot = dots[i];
 87 |                 dot.update();
 88 |                 dot.paint();
 89 | 
 90 |             }
 91 |             requestAnimationFrame(render)
 92 |         }
 93 |         render();
 94 |         function Dot() {
 95 |             this.radius = Math.floor(Math.random() * 3 + 2);//在选一个随机数为圆点半径
 96 |             this.d = Math.random() * 2 * Math.PI;//在0-2π之间随机一个弧度值
 97 |             this.rx = Math.random() * w * (Math.random() > 0.6 ? 2 / 3 : 1 / 4);// 选一个随机数，作为椭圆长轴顶点a的数值,也就是椭圆中心的x轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。
 98 |             this.ry = Math.random() * h - h / 2;//选一个随机数作为椭圆短轴顶点b的数值，也就是椭圆中心的y轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。这两个值可以根据自已需求来定。
 99 |             this.x = Math.cos(this.d) * this.rx + w / 2;
100 |             this.y = Math.sin(this.d) * this.ry + h / 2;//根据椭圆x,y求值公式，x=a*cosα，y=a*sinα.求出圆点在椭圆上的x,y轴坐标.后面加w/2,h/2只是为了居中显示。此处的x,y是相对于canvas建立的直角坐标系的，按canvas约定，其中心点（0,0）点在左上角
101 |             this.z = (Math.pow(Math.pow(this.rx, 2) + Math.pow(this.ry, 2), 0.5) / Math.pow(Math.pow(w / 2, 2) + Math.pow(h / 2, 2), 0.5))//求白色圆点离椭圆中心点的距离，可视为一个点到圆心的距离，用x平方+y平方=c平方求得。此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。此处Z值只是一个比值
102 |             this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;//圆点的缩放大小,根据余弦函数公式y=cosα.标准的余弦函数最大值和最小值分别为1，-1.这里要自行设置最大值和最小值，所以要进行改写
103 |             // this.speed = Math.random() * 0.0005 + 0.0005;
104 |             this.speed = Math.random() * 0.0004 + 0.0004;//圆点运动的速度
105 |             this.alpha = this.scale / maxScale * 0.3 + 0.1;//圆点运动的透明度
106 |             this.count = 0;
107 |             this.paint = () => {
108 |                 ctx.fillStyle = 'rgba(0,130,255,' + this.alpha + ')';
109 |                 ctx.beginPath();
110 |                 ctx.arc(this.x, this.y, this.radius * this.scale * this.z, 0, Math.PI * 2);
111 |                 ctx.fill();
112 |             }
113 |             this.update = () => {
114 |                 this.count += 0.01;
115 |                 if (Math.floor(this.count) % 12 === 0 && Math.floor(this.count) != 0) {
116 |                     this.d += 0.008;
117 |                     if (this.count > Math.floor(this.count) + 0.5) {
118 |                         this.d -= 0.008;
119 |                     }
120 |                 }
121 | 
122 | 
123 |                 this.x = Math.sin(this.d) * this.rx + w / 2;
124 |                 this.y = Math.cos(this.d) * this.ry + h / 2;
125 |                 this.d -= this.speed;//通过改变它的弧度值来改变圆点在椭圆中运动
126 |                 this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;
127 |                 this.alpha = this.scale / maxScale * 0.3 + 0.1;
128 |             }
129 |         }
130 |     </script>
131 | </body>
132 | 
133 | </html>
134 | 


--------------------------------------------------------------------------------