关注公众号
动态html页面源码，看着很高级
下面是代码
html：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<title>登录首页-创新博客</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="../static/bootstrap/css/frist.css" charset="utf-8">
</head>
<body onclick="body_show()">
<div class="team_name">
<h1 class="load">
<span>创</span>
<span>.</span>
<span>新</span>
<span>.</span>
<span>博</span>
<span>.</span>
<span>客</span>
<span>.</span>
</h1>
</div>
<!--登录-->
<div class='form_inner_box' id='form_inner_box'>
<form id='login_form'>
<div class='f_input' id='user' name='user'>
<i class='iconfont icon-zhanghao'></i>
<input type="text" name='username' id='username' autocomplete='off' placeholder='请输入您的帐号'>
</div>
<div class='f_input' id='passwd' name='passwd'>
<!--<i class='iconfont icon-mima'></i>-->
<input type="password" name='passwd' id='password' placeholder='请输入密码'>
</div>
<!--验证-->
<div id="style">
<input type="text" id="code_input" value="" placeholder="请输入验证码" />
<div class="ab" id="v_container" style="width: 200px;height: 50px;"></div>
<button id="my_button">验证</button>
</div>
<div class='f_input' id='log_register'>
<input type="submit" value='登陆 '>
<input type="button" onclick="return_show()" value='返回 '>
</div>
</form>
</div>
<!--注册-->
<div class='form_inner_box2' id='form_inner_box2'>
<form id='register_form'>
<div class='f_input' id='user' name='user'>
<i class='iconfont icon-zhanghao'></i>
<input type="text" name='username' id='username' autocomplete='off' placeholder='请输入用户名'>
</div>
<div class='f_input' id='passwd' name='passwd'>
<i class='iconfont icon-mima'></i>
<input type="password" name='passwd' id='newpassword' placeholder='请输入密码'>
</div>
<div class='f_input' id='passwd' name='passwd'>
<i class='iconfont icon-mima'></i>
<input type="password" name='passwd' id='conNewpassword' placeholder='请再次输入密码'>
</div>
<!--<!–验证–>-->
<!--<div id='style2' >-->
<!--<input type="text" id="code_input2" value="" placeholder="请输入验证码"/>-->
<!--<div class="ab" id="v_Container" style="width: 200px;height: 50px;"></div>-->
<!--<button id="my_button2">验证</button>-->
<!--</div>-->
<div class='f_input' id='log_register'>
<input type="submit" value='注册 ' onsubmit="validate();">
<input type="button" onclick="return_show2()" value='返回 '>
</div>
</form>
</div>
<div class="planet_wraper planet_shadow">
<div class="planet">
<div class="crater_1">
</div>
<div class="crater_2">
</div>
<div class="crater_3">
</div>
<div class="crater_4">
</div>
<div class="crater_5">
</div>
</div>
</div>
<div class="k1">
<div class="layout">
<button id="btn" type="button" onclick="login_show()">登录</button>
<button id="btn" type="submit" onclick="register_show()">注册</button>
</div>
</div>
</body>
<script src="../static/bootstrap/js/gVerify.js"></script>
<script>
<!--登录&返回-->
function login_show() {
var oform = document.getElementById("form_inner_box");
oform.style.display = 'block';
var oforn = document.getElementsByClassName("layout")[0];
oforn.style.display = 'none';
}
function register_show() {
var oform = document.getElementById("form_inner_box2");
oform.style.display = 'block';
var oforn = document.getElementsByClassName("layout")[0];
oforn.style.display = 'none';
}
function return_show() {
var oform = document.getElementById("form_inner_box");
oform.style.display = 'none';
var oforn = document.getElementsByClassName("layout")[0];
oforn.style.display = 'block';
}
function return_show2() {
var oform = document.getElementById("form_inner_box2");
oform.style.display = 'none';
var oforn = document.getElementsByClassName("layout")[0];
oforn.style.display = 'block';
}
// 验证
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function() {
var res = verifyCode.validate(document.getElementById("code_input").value);
if (res) {
alert("验证正确");
} else {
alert("验证码错误");
}
}
var verifyCode2 = new GVerify("v_Container");
document.getElementById("my_button2").onclick = function() {
var res2 = verifyCode2.validate(document.getElementById("code_input2").value);
if (res2) {
alert("验证正确");
} else {
alert("验证码错误");
}
}
</script>
</html>
<script type="application/javascript" src="main.js"></script>
</html>css代码：
/*队名*/
.team_name{
width:600px;
position:absolute;
margin:auto;
margin-top:-370px;
margin-left:-270px ;
top:50%;
left:50%;
}
h1.load{
text-align: center;
text-transform: uppercase;
font-family: 'Nunito', sans-serif;
font-size: 4.6875em;
color: transparent;
letter-spacing: 0.01em;
}
.load span{
text-shadow:
0 0 2px rgba(204, 208, 212,0.9),
0 15px 25px rgba(0, 0, 0, 0.3),
0 -2px 3px rgba(0, 0, 0, 0.1),
0 -5px 10px rgba(255, 255, 255, 0.5),
0 5px 10px rgba(0, 0, 0, 0.3),
0 3px 4px rgba(255, 255, 255, 0.2),
0 0 20px rgba(255, 255, 255, 0.45);
animation: loading 1.20s ease-in-out infinite alternate;
}
@keyframes loading {
to {text-shadow:
0 0 2px rgba(204, 208, 212,0.2),
0 0 3px rgba(0, 0, 0, 0.02),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(0, 0, 0, 0),
0 0 0 rgba(255, 255, 255, 0),
0 0 0 rgba(255, 255, 255, 0);}
}
.load span:nth-child(2){
animation-delay:0.15s;
}
.load span:nth-child(3){
animation-delay:0.30s;
}
.load span:nth-child(4){
animation-delay:0.45s;
}
.load span:nth-child(5){
animation-delay:0.60s;
}
.load span:nth-child(6){
animation-delay:0.75s;
}
.load span:nth-child(7){
animation-delay:0.90s;
}
.load span:nth-child(8){
animation-delay:1.05s;
}
.load span:nth-child(9){
animation-delay:1.20s;
}
/*2*/
.planet_wraper {
position: absolute;
top: 0;
bottom: 165px;
left: -6px;
right: 0;
width: 7rem;
height: 7rem;
margin: auto;
border-radius: 50%;
}
/* */
.planet_shadow {
background: -webkit-linear-gradient(top left, #24b88b 20%, #21776f);
background: -moz-linear-gradient(top left, #24b88b 20%, #21776f);
box-shadow: inset 0 -5px 10px rgba(22, 48, 64, 0.5), 0 0 1.5rem rgba(170, 194, 194, 0.3);
}
.planet {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
animation: rotate 15s linear infinite;
overflow: hidden;
}
/* */
.planet_wraper::before,
.planet_wraper::after {
content: '';
display: block;
position: absolute;
border-radius: 50%;
box-shadow: 0 0.1rem 0.1rem rgba(170, 194, 194, 0.1), inset 0 -0.1rem 0.1rem rgba(170, 194, 194, 0.1);
animation: rotate 5s linear infinite;
}
.planet_wraper::before {
top: -1.75rem;
left: -1.75rem;
width: 11rem;
height: 11rem;
animation-delay: 1s;
}
.planet_wraper::after {
top: -2.5rem;
left: -2.5rem;
width: 15rem;
height: 15rem;
}
.planet > * {
position: relative;
border-radius: 50%;
background-color: #209b85;
box-shadow: inset 1px 1px 5px #163040, 0 0 7px #63eed2;
opacity: 0.3;
}
/* */
.crater_1 {
top: 2rem;
left: 1.5rem;
width: 0.75rem;
height: 0.75rem;
}
.crater_2 {
top: -0.75rem;
left: 5rem;
width: 2.5rem;
height: 2.5rem;
transform: scaleY(0.8) rotateY(-20deg);
}
.crater_3 {
top: 0.5rem;
left: 2rem;
width: 1.25rem;
height: 1.25rem;
}
.crater_4 {
top: -1.5rem;
left: 3.5rem;
width: 0.5rem;
height: 0.5rem;
}
.crater_5 {
top: 1.25rem;
left: 3.5rem;
width: 2rem;
height: 1.5rem;
}
@keyframes bg {
to {
background-position: center 20rem;
}
}
@keyframes rotate {
to {
transform: rotate(360deg)
}
}
body {
background-color: #163040;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.5" fill="%23FFFFFF" cx="28.75" cy="22.338" r="0.713"/><circle opacity="0.2" fill="%23FFFFFF" cx="26.75" cy="79.443" r="0.307"/><circle opacity="0.5" fill="%23FFFFFF" cx="50" cy="41.884" r="0.308"/><circle fill="%23FFFFFF" cx="12.883" cy="42.25" r="0.367"/><circle opacity="0.4" fill="%23FFFFFF" cx="80" cy="72.818" r="0.307"/><circle opacity="0.5" fill="%23FFFFFF" cx="55.625" cy="12.375" r="0.308"/><circle opacity="0.2" fill="%23FFFFFF" cx="73.307" cy="89.375" r="0.308"/><circle opacity="0.5" fill="%23FFFFFF" cx="73" cy="53.884" r="0.308"/><circle opacity="0.5" fill="%23FFFFFF" cx="38.875" cy="89.432" r="0.385"/></svg>');
background-size: 20rem 20rem;
background-position: center 0;
animation: bg 20s linear infinite;
}
/*登录*/
.k1{
}
.k1 .layout{
width:400px;
position:absolute;
margin:auto;
margin-top:98px;
margin-left:-180px ;
top:50%;
left:50%;
z-index: 50;
}
.k1 .layout button{
background-color:transparent;
display: inline-block;
margin: 0 45px;
color: aqua;
width:100px;
height:40px;
font-size: 25px;
border:none;
cursor:pointer;
outline: none;
}
.k1 .layout button.button::after, ..k1 .layout button.button::before {
content: "";
display: block;
position: absolute;
width: 20%;
height: 20%;
border: 2px solid;
transition: all 0.6s ease;
border-radius: 2px;
}
.k1 .layout button.button::after {
bottom: 0;
right: 0;
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: #435a6b;
border-right-color: #435a6b;
}
.k1 .layout button.button::before {
top: 0;
left: 0;
border-bottom-color: transparent;
border-right-color: transparent;
border-top-color: #435a6b;
border-left-color: #435a6b;
}
.k1 .layout button.button:hover:after, .k1 .layout button.button:hover:before {
border-bottom-color: #435a6b;
border-right-color: #435a6b;
border-top-color: #435a6b;
border-left-color: #435a6b;
width: 100%;
height: 100%;
}
/*登陆*/
/*框*/
.form_inner_box{
width:500px;
height:340px;
border:1px solid #7dc1f0;
position:absolute;
left:0;
top:0;
right:0;
bottom:-30px;
margin:auto auto;
background-color: rgba(68, 87, 100, 0.3);
border-radius:15px;
z-index:1000;
display:none}
.form_inner_box2{
width:500px;
height:340px;
border:1px solid #7dc1f0;
position:absolute;
left:0;
top:0;
right:0;
bottom:-30px;
margin:auto auto;
background-color: rgba(68, 87, 100, 0.3);
border-radius:15px;
z-index:1000;
display:none}
.from_inner_box>form{
width:462px;
height:300px;
margin:74px auto 0px;
padding:0px 10px;}
.from_inner_box2>form{
width:462px;
height:300px;
margin:74px auto 0px;
padding:0px 10px;}
input{
outline:none;
}
#style{
height: 50px;
width: 390px;
padding: 5px 0px;
font-size: 16px;
border-style: none;
margin: 60px 0px 0px 45px;
}
#style2{
height: 50px;
width: 390px;
padding: 5px 0px;
font-size: 16px;
border-style: none;
margin: 60px 0px 0px 45px;
}
.f_input{
height:50px;
margin:5px auto;
/*position:relative;*/
}
#style input{
height:30px;
width:150px;
padding: 5px 0px;
font-size:16px;
border-style:none;
/*margin:4px 0px 0px 46px;*/
}
#style2 input{
height:30px;
width:150px;
padding: 5px 0px;
font-size:16px;
border-style:none;
}
#v_container{
/*height:30px;*/
/*width:390px;*/
/*padding: 5px 0px;*/
/*font-size:16px;*/
/*border-style:none;*/
margin:-35px 0px 0px 187px;
padding:5px 0px;
}
#my_button{
margin:-54px 0px 0px 323px;
width: 65px;
height: 30px;
position: absolute;
}
#my_button2{
margin:-54px 0px 0px 323px;
width: 65px;
height: 30px;
position: absolute;
}
#user input,#passwd input{
height:30px;
width:390px;
padding: 5px 0px;
font-size:16px;
border-style:none;
margin:54px 0px 0px 46px;}
/*#login_form{}*/
#form_inner_box>#login_form>#log_register input,#form_inner_box>#login_form>#log_register div{
width:124px;
height:38px;
border-style:none;
border-radius:5px;
float:left;
background: #2ea96b;
font-size:16px;
font-weight:700;
color:#fff;
margin:20px 50px;
}
#form_inner_box2>#register_form>#log_register input,#form_inner_box2>#register_form>#log_register div{
width:124px;
height:38px;
border-style:none;
border-radius:5px;
float:left;
background: #2ea96b;
font-size:16px;
font-weight:700;
color:#fff;
margin:86px 50px;
}
#log_register input:hover{
cursor:pointer;
}js代码：
function validate(){
var word1 = document.getElementsById("newpassword").value;
var word2 = document.getElementById("conNewpassword").value;
if(word1 != word2){
window.alert("两次输入的密码不一致!");
conNewpassword.focus();
return false;
}
return true;
}
!(function(window, document) {
function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数
this.options = { //默认options参数值
id: "", //容器Id
canvasId: "verifyCanvas", //canvas的ID
width: "100", //默认canvas宽度
height: "30", //默认canvas高度
type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
code: ""
}
if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型
for(var i in options) { //根据传入的参数，修改默认参数值
this.options[i] = options[i];
}
}else{
this.options.id = options;
}
this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
this.options.letterArr = getAllLetter();
this._init();
this.refresh();
}
GVerify.prototype = {
/**版本号**/
version: '1.0.0',
/**初始化方法**/
_init: function() {
var con = document.getElementById(this.options.id);
var canvas = document.createElement("canvas");
this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
canvas.id = this.options.canvasId;
canvas.width = this.options.width;
canvas.height = this.options.height;
canvas.style.cursor = "pointer";
canvas.innerHTML = "您的浏览器版本不支持canvas";
con.appendChild(canvas);
var parent = this;
canvas.onclick = function(){
parent.refresh();
}
},
/**生成验证码**/
refresh: function() {
this.options.code = "";
var canvas = document.getElementById(this.options.canvasId);
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
}else{
return;
}
ctx.textBaseline = "middle";
ctx.fillStyle = randomColor(180, 240);
ctx.fillRect(0, 0, this.options.width, this.options.height);
if(this.options.type == "blend") { //判断验证码类型
var txtArr = this.options.numArr.concat(this.options.letterArr);
} else if(this.options.type == "number") {
var txtArr = this.options.numArr;
} else {
var txtArr = this.options.letterArr;
}
for(var i = 1; i <= 4; i++) {
var txt = txtArr[randomNum(0, txtArr.length)];
this.options.code += txt;
ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小
ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
ctx.shadowOffsetX = randomNum(-3, 3);
ctx.shadowOffsetY = randomNum(-3, 3);
ctx.shadowBlur = randomNum(-3, 3);
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
var x = this.options.width / 5 * i;
var y = this.options.height / 2;
var deg = randomNum(-30, 30);
/**设置旋转角度和坐标原点**/
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0);
/**恢复旋转角度和坐标原点**/
ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y);
}
/**绘制干扰线**/
for(var i = 0; i < 4; i++) {
ctx.strokeStyle = randomColor(40, 180);
ctx.beginPath();
ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.stroke();
}
/**绘制干扰点**/
for(var i = 0; i < this.options.width/4; i++) {
ctx.fillStyle = randomColor(0, 255);
ctx.beginPath();
ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
ctx.fill();
}
},
/**验证验证码**/
validate: function(code){
var code = code.toLowerCase();
var v_code = this.options.code.toLowerCase();
console.log(v_code);
if(code == v_code){
return true;
}else{
this.refresh();
return false;
}
}
}
/**生成字母数组**/
function getAllLetter() {
var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
return letterStr.split(",");
}
/**生成一个随机数**/
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**生成一个随机色**/
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
window.GVerify = GVerify;
})(window, document);
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
