HTML5制作精美的用户登录界面，折纸效果

最新推荐文章于 2024-08-19 16:32:23 发布
最新推荐文章于 2024-08-19 16:32:23 发布
阅读量8.2k 收藏 23
点赞数 2

HTML5 CSS3制作的超酷的用户登录界面特效，一个以折纸效果为主题美化的登录框，动态效果丰富的HTML5登录表单，测试请使用火狐或Chrome浏览器。

在这里可以运行此代码：http://www.srcfans.com/jscode/jscss/2606.shtml

<!DOCTYPE html>
<html>
<head>
<title>html5制作超炫的用户登录框-www.srcfans.com</title>
<style>
html, body
{
    height: 100%;
}
body
{
    font: 12px '微软雅黑', 'Trebuchet MS', Arial, Helvetica;
    margin: 0;
    background-color: #d9dee2;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebeef2), to(#d9dee2));
    background-image: -webkit-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -moz-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -ms-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: -o-linear-gradient(top, #ebeef2, #d9dee2);
    background-image: linear-gradient(top, #ebeef2, #d9dee2);
}
#login
{
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image: -moz-linear-gradient(top, #fff, #eee);
    background-image: -ms-linear-gradient(top, #fff, #eee);
    background-image: -o-linear-gradient(top, #fff, #eee);
    background-image: linear-gradient(top, #fff, #eee);
    height: 240px;
    width: 400px;
    margin: -150px 0 0 -230px;
    padding: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,
          0 7px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          1px 1px   0 rgba(0,   0,   0,   .1),
          3px 3px   0 rgba(255, 255, 255, 1),
          4px 4px   0 rgba(0,   0,   0,   .1),
          6px 6px   0 rgba(255, 255, 255, 1),
          7px 7px   0 rgba(0,   0,   0,   .1);
    box-shadow:
          0 0 2px rgba(0, 0, 0, 0.2),
          0 1px 1px rgba(0, 0, 0, .2),
          0 3px 0 #fff,
          0 4px 0 rgba(0, 0, 0, .2),
          0 6px 0 #fff,
          0 7px 0 rgba(0, 0, 0, .2);
}
#login:before
{
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px dashed #ccc;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    -moz-box-shadow: 0 0 0 1px #fff;
    -webkit-box-shadow: 0 0 0 1px #fff;
    box-shadow: 0 0 0 1px #fff;
}
h1
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);
    text-transform: uppercase;
    text-align: center;
    color: #666;
    margin: 0 0 30px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}
h1:after, h1:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 120px;
}
h1:after
{
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);
    right: 0;
}
h1:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}
fieldset
{
    border: 0;
    padding: 0;
    margin: 0;
}
#inputs input
{
    background: #f1f1f1 url(http://www.srcfans.com/jscode/img/201506/images/login-sprite.png) no-repeat;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 353px; /* 353 + 2 + 45 = 400 */
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
#username
{
    background-position: 5px -2px !important;
}
#password
{
    background-position: 5px -52px !important;
}
#inputs input:focus
{
    background-color: #fff;
    border-color: #e8c291;
    outline: none;
    -moz-box-shadow: 0 0 0 1px #e8c291 inset;
    -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
    box-shadow: 0 0 0 1px #e8c291 inset;
}
#actions
{
    margin: 25px 0 0 0;
}
#submit
{
    background-color: #ffb94b;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fddb6f), to(#ffb94b));
    background-image: -webkit-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -moz-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -ms-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: -o-linear-gradient(top, #fddb6f, #ffb94b);
    background-image: linear-gradient(top, #fddb6f, #ffb94b);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
     -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    border-width: 1px;
    border-style: solid;
    border-color: #d69e31 #e3a037 #d5982d #e3a037;
    float: left;
    height: 35px;
    padding: 0;
    width: 120px;
    cursor: pointer;
    font: bold 15px Arial, Helvetica;
    color: #8f5a0a;
}
#submit:hover,#submit:focus
{
    background-color: #fddb6f;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb94b), to(#fddb6f));
    background-image: -webkit-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -moz-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -ms-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: -o-linear-gradient(top, #ffb94b, #fddb6f);
    background-image: linear-gradient(top, #ffb94b, #fddb6f);
}
#submit:active
{
    outline: none;
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner
{
  border: none;
}
#actions a
{
    color: #3151A2;
    float: right;
    line-height: 35px;
    margin-left: 10px;
}
#back
{
    display: block;
    text-align: center;
    position: relative;
    top: 60px;
    color: #999;
}
</style>
</head>
<body>
<form id="login">
    <h1>Log In</h1>
    <fieldset id="inputs">
        <input id="username" type="text" placeholder="Username" autofocus required>
        <input id="password" type="password" placeholder="Password" required>
    </fieldset>
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href="">忘记密码?</a><a href="">注册</a>
    </fieldset>
</form>
<br><br>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

shanshuiboy
关注
login 登录
weixin_46960783的博客
11-16 1381
xml <image src="../../images/1.png" style="width: 100vw;height: 100vh;" mode="aspectFill"></image> <button form-type="submit" open-type="getUserInfo" bindgetuserinfo='bindGetUserInfo' class="p2" >登陆</button> css page{ display: .
login-登录
dengwuhuan4148的博客
05-21 628
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">html, body{ height: 100%;} body{ font: 12p...
零基础入门（四）Axure原型图教程
最新发布
Chen_Siri_33的博客
08-19 1091
Axure作为一款专业的原型设计工具，它可以快速创建出线框图、流程图、原型和规格说明文档，是包括产品经理、UI设计师、用户体验设计师、交互设计师等在内的IT从业人员必备技能。
Login登录
chaixiaokai的博客
11-22 949
//////////////////////////////////////////登录 package com.example.app.Activity; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android
login登录的
07-11
山东黄金课程
html5漂亮的登录界面
10-10
一款html 5写的带有验证功能的漂亮的登录表单
Apress.HTML5.and.JavaScript.Projects.2011
10-23
- **用户界面设计**：设计直观易用的用户界面，提高用户满意度。 ### 第6章：我在哪里：使用地理定位、Google Maps API和PHP - **地理定位技术**：介绍浏览器支持的地理位置API，用于获取用户的当前位置。 - **...
Origami Editor 3D:虚拟折纸程序-开源
04-28
该程序的主要目的是设计折纸，但是如果您只想学习如何制作折纸图形，则可以使用一组内置的示例文件来为您提供帮助。 目前，有34个示例数字可用。 请注意，这个项目是出于娱乐目的而创建的，目前仍在进行中。 讨论...
origami-part2--c51：c51
02-09
然而，有可能是在项目中涉及到用HTML制作用户界面，用于监控或控制由C51代码驱动的硬件设备。 结合这些信息，我们可以深入探讨以下几个知识点： 1. **C51编译器**：C51是专门针对8051微控制器的编译器，它扩展了...
iOS开源项目大全(二)(整理自网络)
陈凯昂的博客
12-11 1085
第二部分 1.完整客户端 ioctocat github的iOS客户端，目前开源代码是V1版本，V2版本在appstore上可以下载 ChatSecure-iOS 使用XMPP协议的IM开源软件，很强大，在appstore上可以下载 SegmentFault SegmentFault的官方iOS客户端 OSChin
简洁漂亮的HTML5登录界面
04-03
简洁漂亮的HTML5登录界面，内置CSS，兼容电脑平板和手机。
精美的系统登录界面HTML5
05-15
一个精美的HTML5+CSS3设计的系统登录界面。 美观，实用
HTML5+CSS3精美登陆界面
03-02
从国外下载的20个左右的精美登陆界面，供大家参考。歪果仁真的好有创意~~我只是搬运工，不收费~~没有一一试过，可能会有些问题~大家可以去https://www.freshdesignweb.com/css-login-form-templates自行查看哦~~那里面的资源有些没下过来~~sorry~
login登陆页面
11-07
1.模拟练习百度login页面： 2.流程：利用截图工具对百度登陆页面进行截图，切图，写页面；
html5,js所编写的一个精美的登陆以及注册界面
10-09
web前端,模仿阿里云注册界面,编写，登陆界面以及注册界面都有相应的注释很容易照着修改！
iOS常用第三方库
qq_36451221的博客
11-29 3127
下面是一些比较流行的第三方库： UITableView组件化库 M80TableViewComponent (0.1.0) HTTP 相比较之下,AFNetworking是目前最优秀的一个了：轻量、易用、使用者多、开发者有在积极维护。在AFN出现之前，这个角色是由ASIHTTPRequest扮演的，只是到现在年久失修了。关于AFN和ASI的对比，这里有一篇不错的文章http://www....
login 登陆界面
weixin_34408624的博客
02-25 826
在这里，我们首先写一个用于登陆的login.jsp，相信很多刚开始进行jsp开发的人，都会很快遇到这个问题。 这是一个很常见的界面。具体代码如下 <%@pagecontentType="text/html;charset=gbk"%> <%@pagelanguage="java"import="java.u...
login登录界面
08-08
login登录界面的html制作，及相应的js编写
HTML5特效大赏：3D视觉盛宴
Hakim El Hattab的实验项目提供了基于HTML5的滚动效果，当用户滚动页面时，元素会呈现出动态变化，增强了用户体验。 4. **形状转换** - (http://hakim.se/experiments/html5/blob/03/) Hakim El Hattab的另一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值