純css3實(shí)現(xiàn)效果超級(jí)炫的checkbox復(fù)選框和radio單選框
發(fā)布時(shí)間：2014-09-01 16:48:48 作者：佚名 
我要評論
我要評論天要為大家分享的是純css3實(shí)現(xiàn)的checkbox復(fù)選框和radio單選框，效果超級(jí)炫，這個(gè)實(shí)例完全由css3實(shí)現(xiàn)的沒有任何js代碼
之前為大家分享了好多css3實(shí)現(xiàn)的按鈕。今天要為大家分享的是純css3實(shí)現(xiàn)的checkbox復(fù)選框和radio單選框，效果超級(jí)炫。先讓我們看看圖吧!
源碼下載
這個(gè)實(shí)例完全由css3實(shí)現(xiàn)的沒有任何js代碼。下面我們一起看下實(shí)現(xiàn)代碼吧
html代碼：
<div style="width:200px; float:left">
<label>
<input type="checkbox" class="option-input checkbox" checked="">
Checkbox
</label>
<label>
<input type="checkbox" class="option-input checkbox">
Checkbox
</label>
<label>
<input type="checkbox" class="option-input checkbox">
Checkbox
</label>
</div>
<div style="width:200px; float:left">
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
</div>
css3代碼：
@-webkit-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-moz-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-o-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 13.33333px;
width: 40px;
height: 40px;
-webkit-transition: all 0.15s ease-out 0;
-moz-transition: all 0.15s ease-out 0;
transition: all 0.15s ease-out 0;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
margin-right: 0.5rem;
z-index: 1000;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: #40e0d0;
}
.option-input:checked::before {
width: 40px;
height: 40px;
position: absolute;
content: '\2716';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 40px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: #40e0d0;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
body {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-align: stretch;
-moz-box-align: stretch;
box-align: stretch;
background: #e8ebee;
color: #9faab7;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
body div {
padding: 5rem;
}
body label {
display: block;
line-height: 40px;
}
是不是很簡單。只要復(fù)制上面的html代碼和css代碼到頁面上。運(yùn)行就可以看到效果了。趕緊試一試吧。哈哈
源碼下載
這個(gè)實(shí)例完全由css3實(shí)現(xiàn)的沒有任何js代碼。下面我們一起看下實(shí)現(xiàn)代碼吧
html代碼：
復(fù)制代碼
代碼如下:<div style="width:200px; float:left">
<label>
<input type="checkbox" class="option-input checkbox" checked="">
Checkbox
</label>
<label>
<input type="checkbox" class="option-input checkbox">
Checkbox
</label>
<label>
<input type="checkbox" class="option-input checkbox">
Checkbox
</label>
</div>
<div style="width:200px; float:left">
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
</div>
css3代碼：
復(fù)制代碼
代碼如下:@-webkit-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-moz-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-o-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 13.33333px;
width: 40px;
height: 40px;
-webkit-transition: all 0.15s ease-out 0;
-moz-transition: all 0.15s ease-out 0;
transition: all 0.15s ease-out 0;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
margin-right: 0.5rem;
z-index: 1000;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: #40e0d0;
}
.option-input:checked::before {
width: 40px;
height: 40px;
position: absolute;
content: '\2716';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 40px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: #40e0d0;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
body {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-align: stretch;
-moz-box-align: stretch;
box-align: stretch;
background: #e8ebee;
color: #9faab7;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
body div {
padding: 5rem;
}
body label {
display: block;
line-height: 40px;
}
是不是很簡單。只要復(fù)制上面的html代碼和css代碼到頁面上。運(yùn)行就可以看到效果了。趕緊試一試吧。哈哈
相關(guān)文章
HTML+CSS實(shí)現(xiàn)單選框、復(fù)選框美觀的樣式
這篇文章主要介紹了HTML+CSS實(shí)現(xiàn)單選框、復(fù)選框美觀的樣式,需要的朋友可以參考下2017-06-26利用CSS3實(shí)現(xiàn)單選框動(dòng)畫特效示例代碼
這篇文章給大家分享了一個(gè)利用CSS3實(shí)現(xiàn)單選框動(dòng)畫特效，效果非常的好，有興趣的下面來一起看看吧。2016-09-26CSS3實(shí)例分享--超炫checkbox復(fù)選框和radio單選框
這篇文章主要介紹了CSS3實(shí)例分享--超炫checkbox復(fù)選框和radio單選框,需要的朋友可以參考下2014-09-01
CSS3實(shí)現(xiàn)的表單單選框、復(fù)選框特效
純CSS3實(shí)現(xiàn)的表單特效，可以對單選框、復(fù)選框設(shè)置顯示特效、可用效果等等2012-10-29CSS3實(shí)現(xiàn)復(fù)選框動(dòng)畫特效示例代碼
這篇文章給大家分享了一個(gè)利用CSS3實(shí)現(xiàn)復(fù)選框的動(dòng)畫特效，實(shí)現(xiàn)后的效果非常不錯(cuò)，有興趣的下面來一起看看吧。2016-09-27- 這篇文章主要為大家分享一款CSS自定義綠色復(fù)選框按鈕樣式，2016-03-04
使用CSS實(shí)現(xiàn)頁面復(fù)選框的方法
這篇文章主要介紹了使用CSS實(shí)現(xiàn)頁面復(fù)選框的方法,純CSS實(shí)現(xiàn),絕不添加任何JS :P 需要的朋友可以參考下2015-07-21
純CSS實(shí)現(xiàn)自定義單選框和復(fù)選框功能
這篇文章主要介紹了純CSS實(shí)現(xiàn)自定義單選框和復(fù)選框功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-16
