HTML5 CSS3 SwitchButton 自定义Radio风格

CSS3自定义Radio,把Radio变成左右滑块的方式,采用HTML5 CSS3技术实现的SwitchButton,现在智能手机经常能见到这种效果。

 

  1 <!DOCTYPE html>
  2 <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  3 <!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
  4 <!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
  5 <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
  6 <head>
  7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8 <title>CSS3自定义Radio样式 www.srcfans.com </title>
  9 <style>
 10 html, body, div, span, applet, object, iframe,
 11 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 12 a, abbr, acronym, address, big, cite, code,
 13 del, dfn, em, img, ins, kbd, q, s, samp,
 14 small, strike, strong, sub, sup, tt, var,
 15 b, u, i, center,
 16 dl, dt, dd, ol, ul, li,
 17 fieldset, form, label, legend,
 18 table, caption, tbody, tfoot, thead, tr, th, td,
 19 article, aside, canvas, details, embed,
 20 figure, figcaption, footer, header, hgroup,
 21 menu, nav, output, ruby, section, summary,
 22 time, mark, audio, video {
 23   margin: 0;
 24   padding: 0;
 25   border: 0;
 26   font-size: 100%;
 27   font: inherit;
 28   vertical-align: baseline;
 29 }
 30 article, aside, details, figcaption, figure,
 31 footer, header, hgroup, menu, nav, section {
 32   display: block;
 33 }
 34 body {
 35   line-height: 1;
 36 }
 37 ol, ul {
 38   list-style: none;
 39 }
 40 blockquote, q {
 41   quotes: none;
 42 }
 43 blockquote:before, blockquote:after,
 44 q:before, q:after {
 45   content: '';
 46   content: none;
 47 }
 48 table {
 49   border-collapse: collapse;
 50   border-spacing: 0;
 51 }
 52 .about {
 53   margin: 80px auto;
 54   padding: 8px;
 55   width: 260px;
 56   font: 10px/18px "Lucida Grande", Tahoma, Verdana, sans-serif;
 57   color: #777;
 58   text-align: center;
 59   text-shadow: 0 1px rgba(255, 255, 255, 0.25);
 60   background: #eee;
 61   background: rgba(250, 250, 250, 0.8);
 62   border-radius: 4px;
 63   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
 64   box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2);
 65   background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
 66   background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
 67   background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
 68   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
 69 }
 70 .about a {
 71   color: #333;
 72   text-decoration: none;
 73   border-radius: 2px;
 74   -webkit-transition: 0.1s;
 75   -moz-transition: 0.1s;
 76   -o-transition: 0.1s;
 77   transition: 0.1s;
 78 }
 79 .about a:hover {
 80   text-decoration: none;
 81   background: #fafafa;
 82   background: rgba(255, 255, 255, 0.7);
 83 }
 84 .about-links {
 85   height: 30px;
 86 }
 87 .about-links a {
 88   float: left;
 89   width: 50%;
 90   line-height: 30px;
 91   font-size: 12px;
 92 }
 93 .about-author {
 94   margin-top: 5px;
 95 }
 96 .about-author a {
 97   padding: 1px 3px;
 98   margin: 0 -1px;
 99 }
100 body {
101   font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
102   color: #404040;
103   background: #3b3f46 url("../img/bg.png") 0 0 repeat;
104 }
105 .container {
106   margin: 0 auto;
107   padding: 90px 0;
108   width: 400px;
109   background-image: -webkit-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
110   background-image: -moz-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
111   background-image: -o-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
112   background-image: radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
113 }
114 .switch {
115   position: relative;
116   margin: 20px auto;
117   height: 26px;
118   width: 120px;
119   background: rgba(0, 0, 0, 0.25);
120   border-radius: 3px;
121   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
122   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
123 }
124 .switch-label {
125   position: relative;
126   z-index: 2;
127   float: left;
128   width: 58px;
129   line-height: 26px;
130   font-size: 11px;
131   color: rgba(255, 255, 255, 0.35);
132   text-align: center;
133   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
134   cursor: pointer;
135 }
136 .switch-label:active {
137   font-weight: bold;
138 }
139 .switch-label-off {
140   padding-left: 2px;
141 }
142 .switch-label-on {
143   padding-right: 2px;
144 }
145 .switch-input {
146   display: none;
147 }
148 .switch-input:checked + .switch-label {
149   font-weight: bold;
150   color: rgba(0, 0, 0, 0.65);
151   text-shadow: 0 1px rgba(255, 255, 255, 0.25);
152   -webkit-transition: 0.15s ease-out;
153   -moz-transition: 0.15s ease-out;
154   -o-transition: 0.15s ease-out;
155   transition: 0.15s ease-out;
156 }
157 .switch-input:checked + .switch-label-on ~ .switch-selection {
158   left: 60px;
159 }
160 .switch-selection {
161   display: block;
162   position: absolute;
163   z-index: 1;
164   top: 2px;
165   left: 2px;
166   width: 58px;
167   height: 22px;
168   background: #65bd63;
169   border-radius: 3px;
170   background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
171   background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
172   background-image: -o-linear-gradient(top, #9dd993, #65bd63);
173   background-image: linear-gradient(to bottom, #9dd993, #65bd63);
174   -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
175   box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
176   -webkit-transition: left 0.15s ease-out;
177   -moz-transition: left 0.15s ease-out;
178   -o-transition: left 0.15s ease-out;
179   transition: left 0.15s ease-out;
180 }
181 .switch-blue .switch-selection {
182   background: #3aa2d0;
183   background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
184   background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
185   background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
186   background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
187 }
188 .switch-yellow .switch-selection {
189   background: #c4bb61;
190   background-image: -webkit-linear-gradient(top, #e0dd94, #c4bb61);
191   background-image: -moz-linear-gradient(top, #e0dd94, #c4bb61);
192   background-image: -o-linear-gradient(top, #e0dd94, #c4bb61);
193   background-image: linear-gradient(to bottom, #e0dd94, #c4bb61);
194 }
195 </style>
196 <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
197 </head>
198 <body>
199   <section class="container">
200     <div class="switch">
201       <input type="radio" class="switch-input" name="view" value="week" id="week" checked>
202       <label for="week" class="switch-label switch-label-off">Week</label>
203       <input type="radio" class="switch-input" name="view" value="month" id="month">
204       <label for="month" class="switch-label switch-label-on">Month</label>
205       <span class="switch-selection"></span>
206     </div>
207     <div class="switch switch-blue">
208       <input type="radio" class="switch-input" name="view2" value="week2" id="week2" checked>
209       <label for="week2" class="switch-label switch-label-off">Week</label>
210       <input type="radio" class="switch-input" name="view2" value="month2" id="month2">
211       <label for="month2" class="switch-label switch-label-on">Month</label>
212       <span class="switch-selection"></span>
213     </div>
214   </section>
215 </body>
216 </html>

这里不能运行代码,可到这里运行:http://www.srcfans.com/jscode/jscss/3989.shtml

posted @ 2018-03-08 21:24  jianghuluanke  阅读(275)  评论(0编辑  收藏  举报