这个得用Html做的
<form action="" method="get">
您喜欢的水果？<br />
<label><input name="Fruit" type="checkbox" value="0" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="1" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="2" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="3" />梨 </label>
</form>
给你看一段超炫的CSS3代码：是关于checkbox的。
<style>*{
margin:0
padding:0
}
body{
background-color:#202838
}
.switch{
width:180px
height:55px
position:relative
margin:100px auto
}
.switch input{
filter: alpha(opacity=0)
opacity: 0
z-index: 100
position: absolute
width: 100%
height: 100%
cursor: pointer
}
.switch label{
display:block
width:80%
height:100%
position: relative
background: linear-gradient(#121823, #161d2b)
border-radius: 30px 30px 30px 30px
box-shadow:
inset 0 3px 8px 1px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(0,0,0,0.5),
0 1px 0 rgba(255,255,255,0.2)
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
}
.switch label i{
display:block
width:51px
height:51px
position:absolute
left:2px
top:2px
z-index:2
border-radius:50%
background: linear-gradient(#36455b, #283446)
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 12px 12px rgba(0,0,0,0.4)
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
}
.switch span {
content: ""
display: inline-block
position: absolute
right: 0px
top: 17px
width: 18px
height: 18px
border-radius: 10px
background: gradient-gradient(#36455b, #283446)
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.2),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(185,231,253,0),
inset 0 0 8px rgba(0,0,0,0.9),
inset 0 -2px 5px rgba(0,0,0,0.3),
inset 0 -5px 5px rgba(0,0,0,0.5)
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
z-index: 2
}
.switch input:checked ~ span{
content: ""
display: inline-block
position: absolute
width: 18px
height: 18px
border-radius: 10px
-webkit-transition: all 0.5s ease
transition: all 0.5s ease
z-index: 2
background: #b9f3fe
background: gradient-gradient(#ffffff, #77a1b9)
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.1),
0 0 10px rgba(100,231,253,1),
inset 0 0 8px rgba( 61,157,247,0.8),
inset 0 -2px 5px rgba(185,231,253,0.3),
inset 0 -3px 8px rgba(185,231,253,0.5)
}
.switch input:checked ~ label i {
left: 63%
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.2),
0 0 8px rgba(0,0,0,0.3),
0 8px 8px rgba(0,0,0,0.3),
inset -1px 0 1px #b9f3fe
-webkit-transition: all .5s ease
transition: all .5s ease
}
</style>
<body>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle"><i></i></label>
<span></span>
</div>
</body>
要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
