目录
一、前言
二、网页文件
三、网页效果
四、代码展示
1.HTML
2.CSS
3.JS
五、更多推荐
动态科幻后台登录界面网页设计实例，应用html+css+js，大家参考。网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码，点赞收藏博文，您的支持是我创作的动力！3Q！
以下为网页正文（节选示例）：
代码如下（节选示例）：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
var whei = $(window).width()
$("html").css({
fontSize: whei / 24
});
$(window).resize(function() {
var whei = $(window).width();
$("html").css({
fontSize: whei / 24
})
});
});
</script>
<div class="main">
<div class="header">
<div class="header-center fl">
<div class="header-title">
登录界面
</div>
<div class="header-img"></div>
</div>
<div class="header-bottom fl"></div>
</div>
<div class="content">
<div class="content-left">
<!--<img src="images/d.png" alt="">-->
</div>
<div class="content-right">
<div class="right-infp">
<div class="right-infp-name">
<input type="text" name="username" placeholder="请输入用户名" maxlength="12" required="" value="" autocomplete="off">
</div>
<div class="right-infp-name">
<input type="text" name="name" placeholder="请输入用户名" autocomplete="off">
</div>
<div class="right-infp-btn">
<button class="btn">登录</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
......
代码如下：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
*,
body {
padding: 0px;
margin: 0px;
color: #ffffff;
}
body {
background: url("https://blog.csdn.net/A240307/article/images/bj.jpg") no-repeat;
background-size: cover;
font-size: .16rem;
color: #ffffff;
position: relative;
width: 100%;
height: 100%;
}
.main {
margin: 0 auto;
width: 100%;
height: 100%;
position: relative;
}
.header {
width: 100%;
height: 1.5rem;
}
.header .header-center {
width: 50%;
height: 1.2rem;
position: relative;
margin: 0 auto;
}
.header .header-center .header-title {
text-align: center;
color: #ffffff;
font-size: .4rem;
text-shadow: 0 0 .3rem #00d8ff;
line-height: 1.05rem;
}
.header .header-img {
background: url("https://blog.csdn.net/A240307/article/images/head.gif") no-repeat center center;
background-size: 100%;
height: 100%;
width: 100%;
position: absolute;
top: .8rem;
}
.content {
width: 12rem;
height: 7rem;
margin: 1rem auto 0 auto;
}
.content .content-left {
width: 6.2rem;
height: 5.8rem;
background: url("https://blog.csdn.net/A240307/article/images/d.png") no-repeat;
background-size: 100% 100%;
padding: 0.4rem 0;
box-sizing: border-box;
margin-right: 2%;
float: left;
}
@-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.content .content-left {
-webkit-transform: rotate(360deg);
animation: rotation 15s linear infinite;
-moz-animation: rotation 15s linear infinite;
-webkit-animation: rotation 15s linear infinite;
-o-animation: rotation 15s linear infinite;
}
.content .content-right {
width: 5.4rem;
height: 5.8rem;
background: url("https://blog.csdn.net/A240307/article/images/e.png") no-repeat;
background-size: 100% 100%;
float: right;
position: relative;
}
.right-infp {
width: 4rem;
height: 3rem;
margin: auto auto;
vertical-align: center;
position: absolute;
top: 1.6rem;
left: 0.9rem;
}
......
代码如下（节选示例）：
! function(a, b) {
"object" == typeof module && "object" == typeof module.exports ? module.exports = a.document ? b(a, !0) : function(a) {
if (!a.document) throw new Error("jQuery requires a window with a document");
return b(a)
} : b(a)
}("undefined" != typeof window ? window : this, function(a, b) {
var c = [],
d = c.slice,
e = c.concat,
f = c.push,
g = c.indexOf,
h = {},
i = h.toString,
j = h.hasOwnProperty,
k = {},
l = a.document,
m = "2.1.4",
n = function(a, b) {
return new n.fn.init(a, b)
},
o = /^[sxA0]+|[sxA0]+$/g,
p = /^-ms-/,
q = /-([da-z])/gi,
r = function(a, b) {
return b.toUpperCase()
};
n.fn = n.prototype = {
jquery: m,
constructor: n,
selector: "",
length: 0,
toArray: function() {
return d.call(this)
},
get: function(a) {
return null != a ? 0 > a ? this[a + this.length] : this[a] : d.call(this)
},
pushStack: function(a) {
var b = n.merge(this.constructor(), a);
return b.prevObject = this, b.context = this.context, b
},
each: function(a, b) {
return n.each(this, a, b)
},
map: function(a) {
return this.pushStack(n.map(this, function(b, c) {
return a.call(b, c, b)
}))
},
slice: function() {
return this.pushStack(d.apply(this, arguments))
},
first: function() {
return this.eq(0)
},
last: function() {
return this.eq(-1)
},
eq: function(a) {
var b = this.length,
c = +a + (0 > a ? b : 0);
return this.pushStack(c >= 0 && b > c ? [this[c]] : [])
},
end: function() {
return this.prevObject || this.constructor(null)
},
push: f,
sort: c.sort,
splice: c.splice
}, n.extend = n.fn.extend = function() {
var a, b, c, d, e, f, g = arguments[0] || {},
h = 1,
i = arguments.length,
j = !1;
for ("boolean" == typeof g && (j = g, g = arguments[h] || {}, h++), "object" == typeof g || n.isFunction(g) || (g = {}), h === i && (g = this, h--); i > h; h++)
if (null != (a = arguments[h]))
for (b in a) c = g[b], d = a[b], g !== d && (j && d && (n.isPlainObject(d) || (e = n.isArray(d))) ? (e ? (e = !1, f = c && n.isArray(c) ? c : []) : f = c && n.isPlainObject(c) ? c : {}, g[b] = n.extend(j, f, d)) : void 0 !== d && (g[b] = d));
return g
}, n.extend({
expando: "jQuery" + (m + Math.random()).replace(/D/g, ""),
isReady: !0,
error: function(a) {
throw new Error(a)
},
......
【关注作者|获取更多源码（2000+个网页源码）|优质文章】；您的支持是我创作的动力！看到这里就【点赞收藏博文】，三连支持下吧，3Q！
Web前端网页制作、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等技术内容，有兴趣的联系我交流学习!