夜雨聆风
很酷的科技感登录页面HTML!!附源码!!
效果展示
完整源码
<!DOCTYPE html><htmllang="en"><head><metaname="viewport"content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><metacharset="UTF-8"><title>登录页</title><linkhref="css/style.css"rel="stylesheet"></head><body><divclass="loginav"><divclass="video"><videosrc="images/video.mp4"mutedautoplayloop></div><divclass=""></div><divclass="loginbox boxall"><divclass="logo"><h1>智能科技平台登录页</h1><h2>zhi neng ke ji ping tai</h2><!-- <img src="images/logo.png"> --></div><divclass="logintit">用户登录</div><ulclass="logininput"><li><i><imgsrc="images/user.png"></i><inputclass="forminput"value=""type="text"placeholder="用户名"></li><li><i><imgsrc="images/password.png"></i><inputclass="forminput"type="password"value=""placeholder="密码"></li><divclass=" flex1"style="padding: 15px 0;"><label> <inputtype="checkbox"checkedclass="aui-checkbox"> 记住密码</label><ahref="#"class="text-primary"> 忘记密码？</a></div><li><ahref="#"class="btn btnblock btn-lg btn-block btn-primary">登录</a></li></ul><divclass="boxfoot"></div></div></div><divclass="copyright">版权所有：All Right By <ahref="http://www.bootstrapmb.com">Reserved</a> 2022-2022</div><canvasid='canvas'style="position:fixed; width:100%; height:100%; left: 0; top: 0; opacity: .3; pointer-events: none;"></canvas><script>var canvas = document.querySelector('canvas');var ctx = canvas.getContext('2d');var w = window.innerWidth;//获取屏幕宽高var h = window.innerHeight * 2 / 2;canvas.width = w;//将屏幕宽高赋值给canvascanvas.height = h;// canvas.style.cssText += `;width:${w}px;height:${h}px;`;var dots = [];var minScale = 1;//设置圆点的最小缩放var maxScale = 3;//设置圆点的最大缩放var bei = 1;for (var i = 0; i < 300; i += 1) { //设置白圆点的个数dots.push(new Dot())}render = () => {ctx.clearRect(0, 0, w, h);ctx.fillStyle = 'rgba(26,94,199,.6)';ctx.fillRect(0, 0, w, h);//描绘底层蓝色背景for (var i = 0; i < dots.length; i += 1) {var dot = dots[i];dot.update();dot.paint();}requestAnimationFrame(render)}render();function Dot() {this.radius = Math.floor(Math.random() * 3 + 2);//在选一个随机数为圆点半径this.d = Math.random() * 2 * Math.PI;//在0-2π之间随机一个弧度值this.rx = Math.random() * w * (Math.random() > 0.6 ? 2 / 3 : 1 / 4);// 选一个随机数，作为椭圆长轴顶点a的数值,也就是椭圆中心的x轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。this.ry = Math.random() * h - h / 2;//选一个随机数作为椭圆短轴顶点b的数值，也就是椭圆中心的y轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。这两个值可以根据自已需求来定。this.x = Math.cos(this.d) * this.rx + w / 2;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）点在左上角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值只是一个比值this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;//圆点的缩放大小,根据余弦函数公式y=cosα.标准的余弦函数最大值和最小值分别为1，-1.这里要自行设置最大值和最小值，所以要进行改写// this.speed = Math.random() * 0.0005 + 0.0005;this.speed = Math.random() * 0.0004 + 0.0004;//圆点运动的速度this.alpha = this.scale / maxScale * 0.3 + 0.1;//圆点运动的透明度this.count = 0;this.paint = () => {ctx.fillStyle = 'rgba(0,130,255,' + this.alpha + ')';ctx.beginPath();ctx.arc(this.x, this.y, this.radius * this.scale * this.z, 0, Math.PI * 2);ctx.fill();}this.update = () => {this.count += 0.01;if (Math.floor(this.count) % 12 === 0 && Math.floor(this.count) != 0) {this.d += 0.008;if (this.count > Math.floor(this.count) + 0.5) {this.d -= 0.008;}console.log(this.count)}this.x = Math.sin(this.d) * this.rx + w / 2;this.y = Math.cos(this.d) * this.ry + h / 2;this.d -= this.speed;//通过改变它的弧度值来改变圆点在椭圆中运动this.scale = (Math.cos(this.d) + 1) * (maxScale - minScale) / 2 + minScale;this.alpha = this.scale / maxScale * 0.3 + 0.1;}}</script></body></html>
*{ padding: 0; margin: 0; box-sizing: border-box; user-select: none;}li{list-style-type: none;}a{text-decoration: none; color: #fff;}html{background: #000; height: 100%;}body{ background: #000; max-width: 1920px; margin: 0 auto; height: 100%; position: relative;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;}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;}.loginbg{background-image:linear-gradient(300deg,#004491,#1e88e5);position:absolute;width:100%;height:50%;left:0;top:0;z-index:0}.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;justify-content: space-between;}.video{ position: absolute;width: 1200px; left: 0px; padding-bottom: 40px; pointer-events: none;}.video video{width: 100%;}.video::before{ position: absolute; content: ""; width: 200px; height: 100%; background: #000; right: 0; top: 0;}.logotit{text-align:center;padding:40px 0;font-size:30px}.loginbox{padding:30px 0 50px 0; width: 600px; padding:30px 50px; flex-shrink: 0; position: relative; z-index: 100;}.logininput .forminput{border:2px solid rgba(32,163,245,.4);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;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);}input::input-placeholder{color: #fff;}::-webkit-input-placeholder { color: #fff; }.flex1{ display: flex; justify-content: space-between; align-items: center;}.flex1 label{color: #fff; display: flex; align-items: center;}.logininput>li{display:block;padding:15px 0;position:relative;}.logininput li>i{ position: absolute; height: 100%; left: 15px; top: 0; display: flex; align-items: center;}.logintit{color:#00bff4;text-align:center;position:relative;padding:25px 0;font-size:24px}.btn-primary{background:#20a3f5; display: block; text-align: center; color: #fff; line-height: 48PX; font-size: 24px;}.btn-primary:hover{background:#137bd6}.copyright{position:fixed;width:100%;left:0;bottom:10px;text-align:center;color:#006b95;font-size:12px}.logo{ position: absolute; top: -120px; width: 100%; left: 0; text-align: center; color: #fff;}.logo h1,.logo h2{background: linear-gradient( 90deg,#009ef3, #00e9d0);background-size: cover;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;text-fill-color: transparent;}.logo h1{ font-weight: bolder; font-size: 48px; font-family: "Microsoft YaHei","HanHei SC"; letter-spacing: 2px;}.logo h2{ font-size: 30px; text-transform: uppercase; font-weight: lighter; letter-spacing: 2px;}.boxall{ border: 2px solid #186baf; background: rgba(32,163,245,.1); position: relative; transform: scale(.7); opacity: 0; animation: shows 1s forwards;}@keyframes shows{to {transform: scale(1); opacity: 1;}}.boxall:before,.boxall:after{ position:absolute; width:30px; height:30px; content: ""; border-top: 3px solid #20a3f5; top: -2px;}.boxall:before,.boxfoot:before{border-left: 3px solid #20a3f5;left:-2px;}.boxall:after,.boxfoot:after{border-right: 3px solid #20a3f5; right: -2px;}.boxfoot{ position:absolute; bottom: 0; width: 100%; left:0;}.boxfoot:before,.boxfoot:after{ position:absolute; width:30px; height:30px; content: "";border-bottom:3px solid #20a3f5; bottom:-2px;}.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;}.aui-checkbox,input[type=radio]{margin:0 3px 0 0 !important;position:relative;}.aui-checkbox:checked,input[type=radio]:checked{text-align:center;background-clip:padding-box;}.aui-checkbox:checked:after,.aui-checkbox:checked:before,input[type=radio]:checked:after,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)}.aui-checkbox:disabled,input[type=radio]:disabled{background-color:#f5f5f;border:solid 1px #ddd}.aui-checkbox:disabled:after,.aui-checkbox:disabled:before,input[type=radio]:disabled:after,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)}input[type="radio"]{ border-radius: 20px;}input{outline: none!important;}@media (max-width: 1200px) {.loginav{justify-content: center;}.video{display: none;}.loginbox{width: 96%;}.logo h1{font-size: 30px;}.logo h2{font-size: 20px;}.loginbox{padding: 30px;}}