超炫酷html+css+javascript实现登录模板

利用Css3 html5实现的超炫酷的登录
很早以前，我们为大家分享过不少外观和功能都非常不错的登录表单，有些登录表单应用了CSS3特性添加了更绚丽的动画特效，比如这款精美的CSS3登录注册切换表单就相当华丽。今天要分享的这款动画登录表单也非常不错，输入框中带有小图标，可随着焦点的获取和失去是现实和隐藏，点击登录时会有一段自定义的登录动画，并最后提示登录成功。
代码中有具体功能注释如果有不懂的可以随时沟通

暗色科幻风格HTML登录页面模板

超炫酷css3登录界面

大数据智慧运营管理中心首页

变换背景登录页

css3登录界面效果粒子动态背景

透明样式登录页面表单样式

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>登录界面</title><link href="css/default.css" rel="stylesheet" type="text/css" /><!--必要样式--><link href="css/styles.css" rel="stylesheet" type="text/css" /><link href="css/demo.css" rel="stylesheet" type="text/css" /><link href="css/loaders.css" rel="stylesheet" type="text/css" />
</head><body><div class='login'><div class='login_title'><span>管理员登录</span></div><div class='login_fields'><div class='login_fields__user'><div class='icon'><img alt="" src='img/user_icon_copy.png'></div><input name="login" placeholder='用户名' maxlength="16" type='text' autocomplete="off" value="kbcxy" /><div class='validation'><img alt="" src='img/tick.png'></div></div><div class='login_fields__password'><div class='icon'><img alt="" src='img/lock_icon_copy.png'></div><input name="pwd" placeholder='密码' maxlength="16" type='text' autocomplete="off"><div class='validation'><img alt="" src='img/tick.png'></div></div><div class='login_fields__password'><div class='icon'><img alt="" src='img/key.png'></div><input name="code" placeholder='验证码' maxlength="4" type='text' name="ValidateNum" autocomplete="off"><div class='validation' style="opacity: 1; right: -5px;top: -3px;"><canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas></div></div><div class='login_fields__submit'><input type='button' value='登录'></div></div><div class='success'></div><div class='disclaimer'><p>欢迎登陆后台管理系统</p></div></div><div class='authent'><div class="loader" style="height: 44px;width: 44px;margin-left: 28px;"><div class="loader-inner ball-clip-rotate-multiple"><div></div><div></div><div></div></div></div><p>认证中...</p></div><div class="OverWindows"></div></script></body></html>

css

/**
*
*
*/:-moz-placeholder {/* Mozilla Firefox 4 to 18 */color: #CECFD2;opacity: 1;
}::-moz-placeholder {/* Mozilla Firefox 19+ */color: #CECFD2;opacity: 1;
}input:-ms-input-placeholder {color: #CECFD2;opacity: 1;
}input::-webkit-input-placeholder {color: #CECFD2;opacity: 1;
}html,
body {padding: 0;margin: 0;height: 100%;font-size: 16px;background-repeat: no-repeat;background-position: left top;background-color: #242645;color: #fff;font-family: 'Source Sans Pro';background-size: 100%;background-image: url(../img/Starry.jpg);
}h1 {font-size: 2.8em;font-weight: 700;letter-spacing: -1px;margin: 0.6rem 0;
}h1>span {font-weight: 300;
}h2 {font-size: 1.15em;font-weight: 300;margin: 0.3rem 0;
}main {width: 95%;max-width: 1000px;margin: 4em auto;opacity: 0;
}main.loaded {transition: opacity .25s linear;opacity: 1;
}main header {width: 100%;
}main header>div {width: 50%;
}main header>.left,
main header>.right {height: 100%;
}main .loaders {width: 100%;box-sizing: border-box;display: flex;flex: 0 1 auto;flex-direction: row;flex-wrap: wrap;
}main .loaders .loader {box-sizing: border-box;display: flex;flex: 0 1 auto;flex-direction: column;flex-grow: 1;flex-shrink: 0;flex-basis: 25%;max-width: 25%;height: 200px;align-items: center;justify-content: center;
}.J_codeimg {width: 85px;height: 36px;padding: 3px;z-index: 0;color: #FFF;
}

js

//Ajax提交
function AjaxPost(Url, JsonData, LodingFun, ReturnFun) {$.ajax({type: "post",url: Url,data: JsonData,dataType: 'json',async: 'false',beforeSend: LodingFun,error: function() {AjaxErro({"Status": "Erro","Erro": "500"});},success: ReturnFun});
}
//示例
//AjaxPost("ajax调用路径", ajax传参,
//                function () {//                     //ajax加载中
//                },
//                function (data) {//                    //ajax返回
//                    //AjaxErro(data);
//                })//弹出
function ErroAlert(e) {var index = layer.alert(e, {icon: 5,time: 2000,offset: 't',closeBtn: 0,title: '错误信息',btn: [],anim: 2,shade: 0});layer.style(index, {color: '#777'});
}//Ajax 错误返回处理
function AjaxErro(e) {if (e.Status == "Erro") {switch (e.Erro) {case "500":top.location.href = '/Erro/Erro500';break;case "100001":ErroAlert("错误 : 错误代码 '10001'");break;default:ErroAlert(e.Erro);}} else {layer.msg("未知错误！");}
}//生成验证码
var code = "";function createCode(e) {code = "";var codeLength = 4;var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');for (var i = 0; i < codeLength; i++) {var charIndex = Math.floor(Math.random() * 60);code += selectChar[charIndex];}if (code.length != codeLength) {createCode(e);}if (canGetCookie == 1) {setCookie(e, code, 60 * 60 * 60, '/');} else {return code;}
}}

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

1.1部署流程

1.2 哇~ 部署成功

哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~

前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~

❉ 源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉ 1.看到这里了就 [点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉ 3.以上内容技术相关问题可以相互学习，可关注↓公Z号获取更多源码 !

❉更多表白源码

❤100款表白源码演示地址

超炫酷html+css+javascript实现登录模板相关推荐

肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
文章目录一.圆形加载动画二.上下跳动的圆球加载动画三.3D立体加载动画四.饼图加载动画五.多色圆点波动效果的加载动画六.制作顺时针放大的圆圈加载动画七.制作小圆圈轮流放大的加载动画八. ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
超炫酷canvas 龙卷风动画
超炫酷canvas 龙卷风动画所有代码最后来看一下效果图所有代码 JavaScript 代码片. function project3D(x, y, z, vars) {var p, d;x -= ...
6个超炫酷的HTML5电子书翻页动画【转】
6个超炫酷的HTML5电子书翻页动画 WebGL 演示网址:http://bookcase.chromeexperiments.com 相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏 ...
ubuntu16 黑主题_给Ubuntu 8.10安装超炫酷黑色新主题
Linux系统的Netbook定做了一套漂亮的界面, 名称叫做 HP Mini 1000 Mi Edition.这套界面是基于 Ubuntu 8.04 Hardy Heron的, 平常我们熟悉的Ubu ...
php仿苹果,关于8个超炫酷仿苹果应用的HTML5动画的图文详解
苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...
最新超炫酷的动态引导页官网HTML源码
正文: 最新超炫酷的动态引导页官网HTML源码,背景是动态的,非常炫酷,有兴趣的自行去体验吧,其它就没什么好介绍的了. 程序: wwxegu.lanzoui.com/iOt9B0h05iof 图片:

超炫酷html+css+javascript实现登录模板

超炫酷html+css+javascript实现登录模板

暗色科幻风格HTML登录页面模板

超炫酷css3登录界面

大数据智慧运营管理中心首页

变换背景登录页

css3登录界面效果粒子动态背景

透明样式登录页面表单样式

html

css

js

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.1部署流程

1.2 哇~ 部署成功

前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

❉ 源码获取

❉更多表白源码

超炫酷html+css+javascript实现登录模板相关推荐

最新文章

热门文章

超炫酷html+css+javascript实现登录模板

超炫酷html+css+javascript实现登录模板

暗色科幻风格HTML登录页面模板

超炫酷css3登录界面

大数据智慧运营管理中心首页

变换背景登录页

css3登录界面效果粒子动态背景

透明样式登录页面表单样式

html

css

js

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.1部署流程

1.2 哇~ 部署成功

前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

❉ 源码获取

❉更多表白源码

超炫酷html+css+javascript实现登录模板相关推荐

最新文章

热门文章

前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)