這篇文章主要講解了“如何實(shí)現(xiàn)超炫checkbox復(fù)選框和radio單選框”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何實(shí)現(xiàn)超炫checkbox復(fù)選框和radio單選框”吧！

成都創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、五蓮網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為五蓮等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

這個(gè)實(shí)例完全由css3實(shí)現(xiàn)的沒有任何js代碼。下面我們一起看下實(shí)現(xiàn)代碼吧

html代碼：

代碼如下:

<div >
           <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 >
           <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%;
}</p> <p>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;
}

感謝各位的閱讀，以上就是“如何實(shí)現(xiàn)超炫checkbox復(fù)選框和radio單選框”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)如何實(shí)現(xiàn)超炫checkbox復(fù)選框和radio單選框這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

文章名稱：如何實(shí)現(xiàn)超炫checkbox復(fù)選框和radio單選框-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://www.chinadenli.net/article10/dosodo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、微信公眾號(hào)、網(wǎng)站改版、網(wǎng)站維護(hù)、虛擬主機(jī)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)