大家好,又见面了,我是全栈君
代码如下,保存到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>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/120773.html原文链接:https://javaforall.cn