代码如下，保存到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 8px; 85 } 86 87 form ol.radio-buttons li label { 88 line-height:20px; 89 padding-right:20px; 90 80px; 91 } 92 93 form ol.radio-buttons li input { 94 padding:0; 95 20px; 96 } 97 http://www.cnblogs.com/roucheng/ 98 */ 99 100 .settings { 101 /* 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>