一款css3很美的iphone注册表单样式

代码如下,保存到html文件打开:1234AnimatedCheckboxesusingCSS3567891025325425525625725825926

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

一款css3很美的iphone注册表单样式此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

代码如下,保存到html文件打开:

  1 <!DOCTYPE html>
  2 <html lang="">
  3 <head>  
  4 <title>Animated Checkboxes using CSS3</title>
  5 <meta charset="utf-8">
  6 <meta name="description" content="UI checkboxes using CSS3" />  
  7 <meta name="keywords" content="CSS3, checkboxes" />
  8 <meta name="robots" content="" />
  9 
 10 <style type="text/css">
 11 
 12 html, body, h1, form, fieldset, legend, ol, li {
 13     margin: 0;
 14     padding: 0;
 15 }
 16 body {
 17     background: #ffffff;
 18     color: #111111;
 19     font-family: Helvetica;
 20     padding: 20px;
 21     font-size: 12px
 22 }
 23 
 24 input:not([type=checkbox]), textarea {
 25     width: 250px;
 26     padding: 5px;
 27     border: 1px solid #ccc;
 28     -moz-border-radius: 5px;
 29     -webkit-border-radius: 5px;
 30 }
 31 
 32 
 33 form {
 34     width: 500px;
 35     margin: 0 auto 0 auto;
 36     
 37     
 38 }
 39 
 40 form fieldset {
 41     padding: 26px;
 42     border: 1px solid #b4b4b4;
 43     -moz-border-radius: 10px;
 44     -webkit-border-radius: 10px;
 45 }
 46 
 47 form legend {
 48     padding: 5px 20px 5px 20px;
 49     color: #030303;
 50     -moz-border-radius: 6px;
 51     -webkit-border-radius: 6px;
 52     border: 1px solid #b4b4b4;
 53 }
 54 
 55 form ol {
 56     list-style: none;
 57     margin-bottom: 20px;
 58     border: 1px solid #b4b4b4;
 59     -moz-border-radius: 10px;
 60     -webkit-border-radius: 10px;
 61     padding: 10px;
 62 }
 63 
 64 form ol, form legend, form fieldset {
 65     background-image: -moz-linear-gradient(top, #f7f7f7, #e5e5e5); /* FF3.6 */
 66     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #e5e5e5),color-stop(1, #f7f7f7)); /* Saf4+, Chrome */
 67 }
 68 
 69 form ol.buttons {
 70     overflow: auto;
 71 }
 72 
 73 form ol li label {
 74     float: left;
 75     width: 160px;
 76     font-weight: bold;
 77     
 78 }
 79 
 80 /*
 81 form ol.radio-buttons li {
 82     float:left;
 83 margin-bottom:0;
 84 width:8px;
 85 }
 86 
 87 form ol.radio-buttons li label {
 88     line-height:20px;
 89 padding-right:20px;
 90 width:80px;
 91 }
 92 
 93 form ol.radio-buttons li input {
 94 padding:0;
 95 width:20px;
 96 }
 97 http://www.cnblogs.com/roucheng/
 98 */
 99 
100 .settings {
101     /* width: 400px; */
102     list-style: none;
103     position: relative;
104 }
105 
106 .settings p {
107     display: block;
108     margin-bottom: 20px;
109     background: -moz-linear-gradient(50% 50% 180deg,#C91A1A, #DB2E2E, #0C990C 0%); 
110     background: -webkit-gradient(linear, 50% 50%, 0% 50%, from(#C90202), to(#009C05), color-stop(0,#00AB00));
111     border-radius: 8px;
112     -moz-border-radius: 6px;
113     border: 1px solid #555555;
114     width: 36px;
115     position: relative;
116     height: 15px;
117 }
118 
119 /*
120 .settings p:before {
121     content: "ON";
122     padding-left: 9px;
123     line-height: 15px;
124     color: #fff;
125     font-size: 14px;
126     text-shadow: #093B5C 0px -1px 1px;
127 
128 }
129 
130 .settings p:after {
131     content: "OFF";
132     padding-left: 12px;
133     line-height: 15px;
134     color: #fff;
135     font-size: 14px;
136     text-shadow: #093B5C 0px -1px 1px;
137 }
138 */
139 
140 .check { 
141     display: block;
142     width: 20px;
143     height: 13px;
144     border-radius: 8px;
145     -moz-border-radius: 6px;
146     background: -moz-linear-gradient(19% 75% 90deg,#FFFFFF, #A1A1A1);
147     background: #fff -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A1A1A1), to(#FFFFFF));
148     border: 1px solid #e5e5e5;
149     position: absolute;
150     top: 0px;
151     left: 0px;
152 }
153 
154 
155 
156 input[type=checkbox] {
157     display: none;
158 }
159 
160 @-webkit-keyframes labelON {
161     0% {
162         top: 0px;
163         left: 0px;
164     }
165     
166     100% { 
167         top: 0px;
168         left: 14px;
169     }
170 }
171 
172 input[type=checkbox]:checked + label.check {
173     top: 0px;
174     left: 14px;
175     -webkit-animation-name: labelON; 
176       -webkit-animation-duration: .2s; 
177       -webkit-animation-iteration-count: 1;
178       -webkit-animation-timing-function: ease-in;
179       -webkit-box-shadow: #244766 -1px 0px 3px;
180       -moz-box-shadow: #244766 -1px 0px 3px;
181 }
182 
183 @-webkit-keyframes labelOFF {
184     0% {
185         top: 0px;
186         left: 16px;
187     }
188     
189     100% { 
190         top: 0px;
191         left: 0px;
192     }
193 }
194 
195 input[type=checkbox] + label.check {
196     top: 0px;
197     left: 0px;
198     -webkit-animation-name: labelOFF; 
199       -webkit-animation-duration: .2s; 
200       -webkit-animation-iteration-count: 1;
201       -webkit-animation-timing-function: ease-in;
202       -webkit-box-shadow: #244766 1px 0px 3px;
203       -moz-box-shadow: #244766 1px 0px 3px;
204 }
205 
206 label.info {
207     position: absolute;
208     color: #000;
209     top:0px;
210     left: 50px;
211     line-height: 15px;
212     width: 200px;
213 }
214 
215 
216 form ol.buttons li {
217     float: left;
218     width: 100px;
219 }
220 
221 input[type=submit] {
222     width: 80px;
223     color: #f3f3f3;
224     -moz-border-radius: 6px;
225     -webkit-border-radius: 6px;
226     background-image: -moz-linear-gradient(top, #0cb114, #07580b); /* FF3.6 */
227     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #07580b),color-stop(1, #0cb114)); /* Saf4+, Chrome */
228     -webkit-box-shadow: #4b4b4b 0px 2px 5px;
229     -moz-box-shadow: #4e4e4e 0px 2px 5px;
230     box-shadow: #e3e3e3 0px 2px 5px;
231     border: none;
232 }
233 input[type=reset] {
234     width: 80px;
235     color: #f3f3f3;
236     -moz-border-radius: 6px;
237     -webkit-border-radius: 6px;
238     background-image: -moz-linear-gradient(top, #d01111, #7e0c0c); /* FF3.6 */
239     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7e0c0c),color-stop(1, #d01111)); /* Saf4+, Chrome */
240     -webkit-box-shadow: #4b4b4b 0px 2px 5px;
241     -moz-box-shadow: #4e4e4e 0px 2px 5px;
242     box-shadow: #e3e3e3 0px 2px 5px;
243     border: none;
244 
245 }
246 
247 input[type=file] {
248     width: 80px;
249 }
250 
251 
252 </style>
253 
254 
255 </head>
256 
257 <body>
258 
259 <form id="form-1" action="" method="post">
260   <fieldset>
261     <legend><b>请填写您的信息</b></legend>
262     <ol>
263       <li><label for="field1">个人账号:</label></li>
264       <li><input type="text" id="field1" name="field1" required/></li>
265     </ol>
266     <ol>
267 
268       <li><label for="field2">个人密码:</label></li>
269       <li><input type="password" id="field2" name="field2" /></li>
270     </ol>
271       <div class="settings">
272           <p>
273             <input type="checkbox" value="1" id="1" name="1" checked="checked"/>
274             <label class="check" for="1"></label>
275             <label class="info">允许被转载</label>
276 
277           </p>
278           <p>
279               <input type="checkbox" value="2" id="2" name="2" />
280             <label class="check" for="2"></label>
281             <label class="info">允许被评论</label>
282           </p>
283         
284       </div>   
285     <ol class="buttons">
286       <li><input type="submit" class="button" value="提交" /></li>
287       <li><input type="reset" class="button" value="重置" /></li>
288     </ol>
289   </fieldset>
290 
291 </form>
292 
293 </body>
294 
295 </html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120773.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号