css3实现一款模仿iphone样式的注册表单


Posted in HTML / CSS onMarch 20, 2013

效果图如下:
css3实现一款模仿iphone样式的注册表单
代码:

<!DOCTYPE html>
<html lang="">
<head>
<title>Animated Checkboxes using CSS3</title>
<meta charset="utf-8">
<meta name="description" content="UI checkboxes using CSS3" />
<meta name="keywords" content="CSS3, checkboxes" />
<meta name="robots" content="" />
<style type="text/css">
html, body, h1, form, fieldset, legend, ol, li {
margin: 0;
padding: 0;
}
body {
background: #ffffff;
color: #111111;
font-family: Helvetica;
padding: 20px;
font-size: 12px
}
input:not([type=checkbox]), textarea {
width: 250px;
padding: 5px;
border: 1px solid #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
form {
width: 500px;
margin: 0 auto 0 auto;
}
form fieldset {
padding: 26px;
border: 1px solid #b4b4b4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
form legend {
padding: 5px 20px 5px 20px;
color: #030303;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #b4b4b4;
}
form ol {
list-style: none;
margin-bottom: 20px;
border: 1px solid #b4b4b4;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 10px;
}
form ol, form legend, form fieldset {
background-image: -moz-linear-gradient(top, #f7f7f7, #e5e5e5); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #f7f7f7)); /* Saf4+, Chrome */
}
form ol.buttons {
overflow: auto;
}
form ol li label {
float: left;
width: 160px;
font-weight: bold;
}
/*
form ol.radio-buttons li {
float:left;
margin-bottom:0;
width:8px;
}
form ol.radio-buttons li label {
line-height:20px;
padding-right:20px;
width:80px;
}
form ol.radio-buttons li input {
padding:0;
width:20px;
}
*/
.settings {
/* width: 400px; */
list-style: none;
position: relative;
}
.settings p {
display: block;
margin-bottom: 20px;
background: -moz-linear-gradient(50% 50% 180deg,#C91A1A, #DB2E2E, #0C990C 0%);
background: -webkit-gradient(linear, 50% 50%, 0% 50%, from(#C90202), to(#009C05), color-stop(0,#00AB00));
border-radius: 8px;
-moz-border-radius: 6px;
border: 1px solid #555555;
width: 36px;
position: relative;
height: 15px;
}
/*
.settings p:before {
content: "ON";
padding-left: 9px;
line-height: 15px;
color: #fff;
font-size: 14px;
text-shadow: #093B5C 0px -1px 1px;
}
.settings p:after {
content: "OFF";
padding-left: 12px;
line-height: 15px;
color: #fff;
font-size: 14px;
text-shadow: #093B5C 0px -1px 1px;
}
*/
.check {
display: block;
width: 20px;
height: 13px;
border-radius: 8px;
-moz-border-radius: 6px;
background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
border: 1px solid #e5e5e5;
position: absolute;
top: 0px;
left: 0px;
}
input[type=checkbox] {
display: none;
}
@-webkit-keyframes labelON {
0% {
top: 0px;
left: 0px;
}
100% {
top: 0px;
left: 14px;
}
}
input[type=checkbox]:checked + label.check {
top: 0px;
left: 14px;
-webkit-animation-name: labelON;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-box-shadow: #244766 -1px 0px 3px;
-moz-box-shadow: #244766 -1px 0px 3px;
}
@-webkit-keyframes labelOFF {
0% {
top: 0px;
left: 16px;
}
100% {
top: 0px;
left: 0px;
}
}
input[type=checkbox] + label.check {
top: 0px;
left: 0px;
-webkit-animation-name: labelOFF;
-webkit-animation-duration: .2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-box-shadow: #244766 1px 0px 3px;
-moz-box-shadow: #244766 1px 0px 3px;
}
label.info {
position: absolute;
color: #000;
top:0px;
left: 50px;
line-height: 15px;
width: 200px;
}
form ol.buttons li {
float: left;
width: 100px;
}
input[type=submit] {
width: 80px;
color: #f3f3f3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: -moz-linear-gradient(top, #0cb114, #07580b); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #07580b),color-stop(1, #0cb114)); /* Saf4+, Chrome */
-webkit-box-shadow: #4b4b4b 0px 2px 5px;
-moz-box-shadow: #4e4e4e 0px 2px 5px;
box-shadow: #e3e3e3 0px 2px 5px;
border: none;
}
input[type=reset] {
width: 80px;
color: #f3f3f3;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background-image: -moz-linear-gradient(top, #d01111, #7e0c0c); /* FF3.6 */
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7e0c0c),color-stop(1, #d01111)); /* Saf4+, Chrome */
-webkit-box-shadow: #4b4b4b 0px 2px 5px;
-moz-box-shadow: #4e4e4e 0px 2px 5px;
box-shadow: #e3e3e3 0px 2px 5px;
border: none;
}
input[type=file] {
width: 80px;
}
</style>
</head>
<body>
<form id="form-1" action="" method="post">
<fieldset>
<legend><b>请填写您的信息</b></legend>
<ol>
<li><label for="field1">个人账号:</label></li>
<li><input type="text" id="field1" name="field1" required/></li>
</ol>
<ol>
<li><label for="field2">个人密码:</label></li>
<li><input type="password" id="field2" name="field2" /></li>
</ol>
<div class="settings">
<p>
<input type="checkbox" value="1" id="1" name="1" checked="checked"/>
<label class="check" for="1"></label>
<label class="info">允许被转载</label>
</p>
<p>
<input type="checkbox" value="2" id="2" name="2" />
<label class="check" for="2"></label>
<label class="info">允许被评论</label>
</p>
</div>
<ol class="buttons">
<li><input type="submit" class="button" value="提交" /></li>
<li><input type="reset" class="button" value="重置" /></li>
</ol>
</fieldset>
</form>
</body>
</html>

 

HTML / CSS 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
巧用CSS3的calc()宽度计算做响应模式布局的方法
Mar 22 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 HTML / CSS
css3打造一款漂亮的卡哇伊按钮
Mar 20 #HTML / CSS
css3.0 图形构成实例练习二
Mar 19 #HTML / CSS
css3.0 图形构成实例练习一
Mar 19 #HTML / CSS
基于css3实现漂亮便签样式
Mar 18 #HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 #HTML / CSS
利用css3制作3D样式按钮实现代码
Mar 18 #HTML / CSS
css3 按钮样式简单可扩展创建
Mar 18 #HTML / CSS
You might like
PHP中的正规表达式(一)
2006/10/09 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
ThinkPHP的L方法使用简介
2014/06/18 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
javascript实现数字验证码的简单实例
2014/02/10 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
Python中的ctime()方法使用教程
2015/05/22 Python
Python selenium如何设置等待时间
2016/09/15 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python requests指定出口ip的例子
2019/07/25 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
html5 canvas 使用示例
2010/10/22 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
经典洗发水广告词
2014/03/13 职场文书
技术负责人任命书
2014/06/05 职场文书
工会趣味活动方案
2014/08/18 职场文书
简易离婚协议书范本
2014/10/24 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript