css3實(shí)現(xiàn)一款模仿iphone樣式的注冊(cè)表單
發(fā)布時(shí)間：2013-03-20 14:09:54 作者：佚名 
我要評(píng)論
我要評(píng)論注冊(cè)表單而且還是iphone樣式的，怎么樣心動(dòng)了吧，學(xué)好css3實(shí)現(xiàn)這個(gè)效果不是問(wèn)題，接下來(lái)為大家詳細(xì)介紹下css3如何實(shí)現(xiàn)注冊(cè)表單的樣式，感興趣的你們可不要錯(cuò)過(guò)了哈
效果圖如下：
代碼：
<!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>請(qǐng)?zhí)顚?xiě)您的信息</b></legend>
<ol>
<li><label for="field1">個(gè)人賬號(hào)：</label></li>
<li><input type="text" id="field1" name="field1" required/></li>
</ol>
<ol>
<li><label for="field2">個(gè)人密碼：</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">允許被轉(zhuǎn)載</label>
</p>
<p>
<input type="checkbox" value="2" id="2" name="2" />
<label class="check" for="2"></label>
<label class="info">允許被評(píng)論</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>
代碼：
復(fù)制代碼
代碼如下:<!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>請(qǐng)?zhí)顚?xiě)您的信息</b></legend>
<ol>
<li><label for="field1">個(gè)人賬號(hào)：</label></li>
<li><input type="text" id="field1" name="field1" required/></li>
</ol>
<ol>
<li><label for="field2">個(gè)人密碼：</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">允許被轉(zhuǎn)載</label>
</p>
<p>
<input type="checkbox" value="2" id="2" name="2" />
<label class="check" for="2"></label>
<label class="info">允許被評(píng)論</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>
相關(guān)文章
CSS3模擬iPhone4界面 滑動(dòng)解鎖代碼下載
純CSS3模擬iPhone4界面及滑動(dòng)解鎖，沒(méi)有過(guò)多的使用圖片，能做出這種效果的確不錯(cuò)了2012-05-08
本特效是一款使用純CSS3制作的逼真的iphone 6手機(jī)模型效果的代碼，通過(guò)簡(jiǎn)單HTML代碼配合CSS3漸變等效果2016-04-20- 這篇文章主要介紹了用CSS3寫(xiě)出iPhone中的返回按鈕,需要的朋友可以參考下2015-04-04
純CSS3實(shí)現(xiàn)的iPhone樣式的3D菜單特效源碼
今天要分享的CSS3菜單時(shí)模擬iPhone樣式的，菜單整體呈現(xiàn)3D立體的視覺(jué)效果2015-01-19
純CSS3實(shí)現(xiàn)3D效果iPhone6手機(jī)外觀動(dòng)畫(huà)特效源碼
iPhone 6剛發(fā)布不久，今天我們就用純CSS3來(lái)把iPhone 6的外觀簡(jiǎn)單地繪制出來(lái)2014-10-20CSS3 重置iphone瀏覽器按鈕input,select等表單元素的默認(rèn)樣式
之前寫(xiě)了一個(gè)登錄表單頁(yè)面，再iphone上測(cè)試遇到了一些奇怪的問(wèn)題：表單中的input[type="submit"]按鈕在iPhone的safari瀏覽器下會(huì)出現(xiàn)圓角的情況；input[type="text"]文本輸2014-10-11
CSS3模仿蘋(píng)果iphone的搜索框聚焦變長(zhǎng)效果
幾乎和蘋(píng)果iphpne自帶的搜索框一樣，搜索框獲取焦點(diǎn)時(shí)搜索框會(huì)變長(zhǎng)2013-09-18
css3 iphone玻璃透明氣泡完美實(shí)現(xiàn)
玻璃透明氣泡而且還是類(lèi)似iphone風(fēng)格的，聽(tīng)起來(lái)還不錯(cuò)吧，貌似css3的出現(xiàn)讓一切看似不可能的事情變成了可能，接下來(lái)為大家介紹下css3實(shí)現(xiàn)玻璃透明氣泡的寫(xiě)法，感興趣的朋友2024-04-23CSS3實(shí)現(xiàn)iPhone滑動(dòng)解鎖功能代碼
這篇文章主要介紹了CSS3實(shí)現(xiàn)iPhone滑動(dòng)解鎖功能代碼的相關(guān)資料,需要的朋友可以參考下2016-07-18
