请选择 进入手机版 | 继续访问电脑版
记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 6608|回复: 0
收起左侧

[HTML5/CSS3] CSS3制作登录表单[含1P]

[复制链接]
发表于 2017-6-11 20:33:34 | 显示全部楼层 |阅读模式



这个表单效果是很普通,但其制作采用的方法却很有创新,其中用到老技术的是@font-face制作icon、box-shadow制作阴影等,最亮点是使用了calc()函数来计算定位的值。这可是一种新玩法,虽然前面有介绍过这个属性的使用方法,后期的制作中却很少使用他,这个案例让我再次领略了calc()函数的功能。如果你喜欢,也可以尝试一下,自己动手丰衣足食。







HTML结构

表单的结构层出不穷,但我更喜欢Bootstrap中表单的结构,当然这个例子中白牙同学是没使用那种结构,但也是很清晰,也很简单:
  1. <form action="" method="post" class="login-form">
  2.   <div class="username">
  3.     <input type="text" name="username" placeholder="[email protected]" autocomplete="on" />
  4.     <span class="user-icon icon">u</span>
  5.   </div>
  6.   <div class="password">
  7.     <input type="password" name="password" placeholder="*******" />
  8.     <span class="password-icon icon">p</span>
  9.   </div>
  10.   <div class="account-control">
  11.     <input type="checkbox" name="Remember me" id="Remember me" value="Remember me" checked="checked" />
  12.     <label for="Remember me" data-on="c" class="check"></label>
  13.     <label for="Remember me" class="info">Remember me</label>
  14.     <button type="submit">Login</button>
  15.   </div>
  16.   <p class="not-registered">Not a registered user yet?<a>Sign up now!</a></p>
  17. </form>
复制代码
CSS代码

常用到的样式代码就不另外单独介绍了,具体的可以参考样式代码中的注解:
  1. /*基本样式*/
  2. body {
  3.   background: url(bg.jpg) no-repeat center fixed;
  4.   background-size: 100% 100%;/*让背景图全屏显示,常用来制作全屏背景*/
  5. }
  6. .content {
  7.   width:600px;
  8.   height:420px;
  9.   margin:50px auto;
  10. }
  11. /*登录表单form样式*/
  12. .login-form {
  13.   width:400px;
  14.   height:177px;
  15.   margin:70px auto 0;
  16.   padding-top:73px;
  17.   position:relative;/*为用户头像定位做一个参照点*/
  18.   background-image:-*-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));/*渐变效果制作*/
  19.   box-shadow:0 3px 3px rgba(21,62,78,0.8);/*阴影效果实现*/
  20. }
  21. /*使用伪类制作用户头像效果*/
  22. .login-form:before {
  23.   content:"";
  24.   position:absolute;
  25.   top:-50px;
  26.   left:150px;
  27.   width:102px;
  28.   height:102px;
  29.   padding:2px;
  30.   border:1px solid rgb(216,216,219);
  31.   background:#fff url("profilepicture.jpg") no-repeat 2px 2px;/*加载用户头像*/
  32. }
  33. /*注册提示信息*/
  34. .not-registered {
  35.   position:absolute;
  36.   color:rgb(153,153,153);
  37.   font-weight:bold;
  38.   top:calc(100% + 20px);/*相当于bottom:-66px(div.not-registered自身的高度46px加上向下移动的20px)*/
  39.   background-color:rgb(255,255,255);
  40.   width:400px;
  41.   height:46px;
  42.   margin:0 auto;
  43.   line-height:46px;
  44.   text-align: center;
  45.   box-shadow:0 3px 3px rgba(21,62,78,0.8);
  46. }
  47. .not-registered a {
  48.   margin-left:5px;
  49.   text-decoration: none;
  50.   color:rgb(52,119,182);
  51.   cursor: pointer;
  52. }
  53. /*表单内部元素样式设置*/
  54. .login-form div {
  55.   width:216px;
  56.   height:28px;
  57.   margin:20px auto;
  58.   position:relative;
  59.   line-height:28px;
  60.   border:none;
  61. }
  62. /*用户和密码的icon制作*/
  63. .login-form .user-icon,
  64. .login-form .password-icon {
  65.   display:inline-block;
  66.   font-family: 'loginform-icon';
  67.   font-size:15px;
  68.   text-align:center;
  69.   line-height:28px;
  70.   color:rgb(153,153,153);
  71.   position:absolute;
  72.   left:1px;
  73.   top:1px;
  74.   background-color:rgb(255,255,255);
  75.   border:none;
  76.   border-right:1px solid rgb(229,229,232);
  77.   width:30px;
  78.   height:28px;
  79.   transition: all 300ms linear;
  80. }
  81. /*表单input的样式*/
  82. .login-form .username input, .login-form .password input {
  83.   height:100%;
  84.   width:calc(100% - 40px);/*使用calc计算表单的宽度(其中40px是用来放icon的空间)*/
  85.   padding-left:40px;
  86.   border-radius:2px;
  87.   border:1px solid;
  88.   border-color:rgb(229,229,232) rgb(220,220,221) rgb(213,213,213) rgb(220,220,221);
  89.   display:block;
  90.   transition: all 300ms linear;
  91. }
  92. /*使用伪类制作三角效果*/
  93. .login-form .icon:before, .login-form .icon:after {
  94.   content:"";
  95.   position:absolute;
  96.   top:10px;
  97.   left:30px;
  98.   width:0;
  99.   height:0;
  100.   border:4px solid transparent;
  101.   border-left-color:rgb(255,255,255);
  102. }
  103. .login-form .icon:before {
  104.   top:9px;
  105.   border:5px solid transparent;
  106.   border-left-color:rgb(229,229,232);
  107. }
  108. /*表单焦点状态下效果*/
  109. .login-form .username input:focus, .login-form .password input:focus {
  110.   border-color:rgb(69,153,228);
  111.   box-shadow:0 0 2px 1px rgb(200,223,244);
  112. }
  113. .login-form .username input:focus + span, .login-form .password input:focus + span {
  114.   background:-*-linear-gradient(top,rgb(255,255,255),rgb(245,245,245));
  115.   color:rgb(51,51,51);
  116. }
  117. .login-form .username input:focus + span:after, .login-form .password input:focus + span:after {
  118.   border-left-color:rgb(250,250,250);
  119. }

  120. .login-form .account-control label {
  121.   margin-left:24px;
  122.   font-size:12px;
  123.   font-family: Arial, Helvetica, sans-serif;
  124.   cursor:pointer;
  125. }
  126. /*按钮效果*/
  127. .login-form button[type="submit"] {
  128.   color:#fff;
  129.   font-weight:bold;
  130.   float:right;
  131.   width:68px;
  132.   height:30px;
  133.   position:relative;
  134.   background:-*-linear-gradient(top,rgb(74,162,241),rgb(52,119,182)) 1px 0 no-repeat,
  135.        -*-linear-gradient(top,rgb(52,118,181),rgb(36,90,141)) left top no-repeat;
  136.   background-size:66px 28px,68px 29px;
  137.   border:none;
  138.   border-top:1px solid rgb(52,118,181);
  139.   border-radius:2px;
  140.   box-shadow:inset 0 1px 0 rgb(86,174,251);
  141.   text-shadow:0 1px 1px rgb(51,113,173);
  142.   transition: all 200ms linear;
  143. }
  144. .login-form button[type="submit"]:hover {
  145.   text-shadow:0 0 2px rgb(255,255,255);
  146.   box-shadow:inset 0 1px 0 rgb(86,174,251),0 0 10px 3px rgba(74,162,241,0.5);
  147. }
  148. .login-form button[type="submit"]:active {
  149.   background:-*-linear-gradient(top,rgb(52,119,182),rgb(74,162,241)) 1px 0 no-repeat,
  150.        -*-linear-gradient(top,rgb(52,118,181),rgb(36,90,141)) left top no-repeat;
  151. }
  152. /*自定义复选框效果*/
  153. .login-form .account-control input {
  154.   width:0px;
  155.   height:0px;
  156. }
  157. .login-form label.check {
  158.   position:absolute;
  159.   left:0;
  160.   top:50%;
  161.   margin:-8px 0;
  162.   display:inline-block;
  163.   width:16px;
  164.   height:16px;
  165.   line-height: 16px;
  166.   text-align:center;
  167.   border-radius:2px;
  168.   background:-*-linear-gradient(top,rgb(255,255,255),rgb(246,246,246)) 1px 1px no-repeat,
  169.        -*-linear-gradient(top,rgb(227,227,230),rgb(165,165,165)) left top no-repeat;
  170.   background-size:14px 14px,16px 16px;
  171. }
  172. .login-form .account-control input:checked + label.check:before {
  173.   content:attr(data-on);
  174.   font-family:loginform-icon;
  175. }
  176. /*调用服务器字体*/
  177. @font-face {
  178.   font-family: 'loginform-icon';
  179.   src: url("font/loginform-icon.eot");
  180.   src: url("font/loginform-icon.eot?#iefix") format('embedded-opentype'),
  181.     url("font/loginform-icon.woff") format('woff'),
  182.     url("font/loginform-icon.ttf") format('truetype'),
  183.     url("font/loginform-icon.svg#loginform-icon") format('svg');
  184.   font-weight: normal;
  185.   font-style: normal;
  186. }
复制代码




上一篇:太棒了!mask 轻松构建炫酷CSS探照特效!
下一篇:HTML5 对各个标签的定义与规定:base
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表