动态星空科技感粒子登录页 附代码复制即可用
效果图（仔细看会有星空效果和粒子效果）；背景可以放到任意页面中
代码：
<html lang="en"><head>
<meta charset="UTF-8">
<title>登录</title>
<style>
*{
margin: 0;
padding: 0;
}
.cavs{
z-index:1;
position: fixed;
width:95%;
margin-left: 20px;
margin-right: 20px;
}
html,body{
width: 100%;
height: 100%;
background-image: url("loginbj.png");
/*background-image: -webkit-linear-gradient(top, #02164f, #000);*/
/*background-image: -moz-linear-gradient(top, #02164f, #000);*/
/*background-image: -ms-linear-gradient(top, #02164f, #000);*/
/*background-image: -o-linear-gradient(top, #02164f, #000);*/
/*background-image: linear-gradient(to bottom, #02164f, #000);*/
/*background-color: #1A1A1A;*/
}
.dela-presets-container-1 .dela-preset-1-2 {
position: relative;
font-size: 16px;
width: 24.4em;
min-width: 11em;
padding: 5.6em 3.68em 6.1em 3.68em;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
font-family: Roboto;
background: linear-gradient(to top, #b76cd2 0, #4c3bb3 100%);
}
.dela-presets-container-1 .dela-preset-1-2 .dela-form__title {
color: #fff;
margin: 0;
font-size: 2.38em;
font-weight: 400;
text-align: center;
margin-bottom: 0.89em;
}
.dela-presets-container-1 .dela-preset-1-2 {
position: relative;
font-size: 16px;
width: 390px;
padding: 56px 65px 55px 65px;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.2);
font-family: Roboto;
background: linear-gradient(to top, #b76cd2 0, #4c3bb3 100%);
}
.dela-presets-container-1 .dela-preset-1-2 input[type="email"], .dela-presets-container-1 .dela-preset-1-2 input[type="password"], .dela-presets-container-1 .dela-preset-1-2 input[type="text"] {
color: #fff;
font-family: Roboto;
font-size: 1em;
font-weight: 200;
width: 100%;
background: none;
border: none;
padding: 0.8em 0;
border-bottom: 0.063em solid rgba(255, 255, 255, 0.2);
margin-bottom: 1.1em;
border-radius: 0;
}
.dela-presets-container-1{
z-index: 100;
position: absolute;
left: 35%;
opacity: 0.8;
top: 100px;
}
.dela-presets-container-1 .dela-preset-1-2 .dela-form__checkbox {
display: inline-block;
font-size: 0.875em;
margin-top: 0.7em;
font-weight: 200;
cursor: pointer;
color: #fff;
overflow: hidden;
position: relative;
}
.dela-presets-container-1 .dela-preset-1-2 input[type="submit"] {
margin: 0 auto;
display: block;
color: #fff;
font-family: Roboto;
font-size: 1em;
font-weight: 200;
width: 10.25em;
min-height: 2.71em;
background: none;
border: 0.063em solid #fff;
border-radius: 0.6em;
cursor: pointer;
margin-top: 2.1em;
-webkit-appearance: none;
}
.stars, .twinkl {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
}
.ball{
width: 100%;
height: 282px;
position:absolute;
left:0;
right:0;
bottom:0;
display:block;
background:#000 url(ball.jpg) repeat top center;
z-index:0;
}
.stars {
background:#000 url(stars.png) repeat top center;
z-index:0;
}
.twinkl{
background:transparent url(twinkling.png) repeat top center;
z-index:0;
-moz-animation:move-twink-back 200s linear infinite;
-ms-animation:move-twink-back 200s linear infinite;
-o-animation:move-twink-back 200s linear infinite;
-webkit-animation:move-twink-back 200s linear infinite;
animation:move-twink-back 200s linear infinite;
}
@keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
input::-webkit-input-placeholder {
/* WebKit, Blink, Edge 适配谷歌*/
color: #fff !important;
}
input::-moz-placeholder {
/* Mozilla Firefox 4 to 18 适配火狐*/
color: #fff !important;
}
input:-moz-placeholder {
/* Mozilla Firefox 19+ 适配火狐*/
color: #fff !important;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 适配ie*/
color: #fff !important;
}
input:focus {
outline-offset: -2px;
}
:focus {
outline: -webkit-focus-ring-color auto 0px;
}
</style>
</head>
<body style="">
<canvas class="cavs" width="1857" height="927"></canvas>
<div class="stars"></div>
<div class="twinkl"></div>
<div class="ball"></div>
<div class="dela-presets-container-1">
<form class="dela-preset-1-2" action="?" method="get">
<p class="dela-form__title">登录</p>
<input type="text" name="name" placeholder="Name" required="" autocomplete="name">
<input type="password" name="password" id="pass-1" placeholder="Password" required="">
<input type="password" placeholder="Code" style="width: 216px;vertical-align: top;display: inline-block" name="repeat" oninput="this.setCustomValidity(this.value != document.getElementById('pass-'+1).value ? 'Passwords are not the same.' : '')"
required="">
<a style="display: inline-block;width: 164px;height: 43px;border: 1px #f00 solid"></a>
<label class="dela-form__checkbox">记住我
<input type="checkbox" name="policy" value="1" required="">
<span></span></label>
<input type="submit" name="submit" value="Login"></form>
</div>
<script src="jquery-3.0.0.min.js"></script>
<script src="ban.js"></script></body></html>
资源链接：https://download.csdn.net/download/qq_42197013/12937115