在微信上看到一個(gè)教程文，覺得制作的小動(dòng)畫還是很有意思的，自己也試驗(yàn)了一下。一開始動(dòng)畫怎么都不執(zhí)行（我用的HB），因?yàn)閮?nèi)置瀏覽器對(duì)css3的不兼容。加上各種瀏覽器前綴后就好了。但是旋轉(zhuǎn)那個(gè)效果，在HB里還是不能正常播放。

總結(jié)就是：1，學(xué)習(xí)到了css3的偽類選擇器還可以這樣用！2，css3的動(dòng)畫設(shè)置還可以這樣搭配！3，label可以替代radio。如果正常情況下讓我想一個(gè)給radio

加動(dòng)畫的方法，我肯定不會(huì)想到把radio隱藏的！這是欲擒故縱啊。。。。

以下是代碼：

<div class="radio1"><h1>縮放動(dòng)畫</h1><input type="radio" name="ys" id="r1" /><label for="r1"></label><input type="radio" name="ys" id="r2" /><label for="r2"></label><input type="radio" name="ys" id="r3" /><label for="r3"></label></div><div class="radio2"><h1>旋轉(zhuǎn)動(dòng)畫</h1><input type="radio" name="ys2" id="r4" /><label for="r4"></label><input type="radio" name="ys2" id="r5" /><label for="r5"></label><input type="radio" name="ys2" id="r6" /><label for="r6"></label></div> <style type="text/css">body {background-color: #EEEEEE;}h1{color: #DC143C;}div {border: 1px solid #DC143C;border-radius: 12px;margin-top: 10px;padding: 10px;text-align: center;}.radio1 label {display: inline-block;position: relative;width: 28px;height: 28px;border: 1px solid #ccc;background-color: #FFF;cursor: pointer;border-radius: 50%;margin-top: 10px;}/*核心就是把label變成了單選框的樣式，把radio隱藏起來，因?yàn)檫x中l(wèi)abel就會(huì)選中對(duì)應(yīng)的額radio，所以用戶不必直接選radio了，而是通過label變相的來選中radio。但好處就是label可以加動(dòng)畫樣式。*//*給label的后邊加一個(gè)動(dòng)畫*/.radio1 label:after {content: "";position: absolute;top: 4px;left: 4px;width: 20px;height: 20px;border-radius: 50%;background-color: #666;-moz-transform: scale(0);-webkit-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);-moz-transition: transform .5s ease-out;-webkit-transition: transform .5s ease-out;-o-transition: transform .5s ease-out;-ms-transition: transform .5s ease-out;transition: transform .5s ease-out;}/*把小黑點(diǎn)做出來，縮放為0.做出來的方法，是在label的后邊加上了一個(gè)空偽類，然后填充顏色*/.radio1 input[type="radio"]:checked+ label {/*這既是靈活運(yùn)用偽類選擇器和兄弟選擇器了。checked表示被選中的那個(gè)radio，+表示那個(gè)radio下邊的近鄰label*/background-color: #eee;-moz-transition: transform .2s ease-out;-webkit-transition: transform .2s ease-out;-ms-transition: transform .2s ease-out;-o-transition: transform .2s ease-out;transition: transform .2s ease-out;}.radio1 input[type="radio"]:checked+ label:after {-moz-transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1);-o-transform: scale(1);transform: scale(1);-moz-transition: transform .5s ease-out;-webkit-transition: transform .5s ease-out;-o-transition: transform .5s ease-out;-ms-transition: transform .5s ease-out;transition: transform .5s ease-out;}.radio1 input[type="radio"] {display: none;}/*radio2自己練習(xí)旋轉(zhuǎn)動(dòng)畫*/.radio2 label{width: 30px;height: 30px;background-color: coral;display: inline-block;border-radius: 50%;border: 1px solid #D2B48C;margin-right: 5px;position: relative;cursor: pointer;overflow: hidden;/*///*/}.radio2 label:after{content: "";width: 20px;height: 20px;background-color: #90EE90;position: absolute;top: 5px;left: 5px;border-radius: 50%;-webkit-transform: rotate(-80deg);-moz-transform: rotate(-180deg);-ms-transform: rotate(-180deg);-o-transform: rotate(-180deg);transform: rotate(-180deg);-webkit-transform-origin: -10px 50%;-moz-transform-origin: -10px 50%;-ms-transform-origin: -10px 50%;-o-transform-origin: -10px 50%;transform-origin: -3px 50%;-webkit-transition: transform .7s ease-out;-moz-transition: transform .7s ease-out;-ms-transition: transform .7s ease-out;-o-transition: transform .7s ease-out;transition: transform .7s ease-out;}.radio2 input[type="radio"]:checked + label{background-color: #4169E1;-webkit-transition: background-color .7s ease-out;-moz-transition: background-color .7s ease-out;-ms-transition: background-color .7s ease-out;-o-transition: background-color .7s ease-out;transition: background-color .7s ease-out;}.radio2 input[type="radio"]:checked +label:after{-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: transform .7s ease-out;-moz-transition: transform .7s ease-out;-ms-transition: transform .7s ease-out;-o-transition: transform .7s ease-out;transition: transform .7s ease-out;}.radio2 input[type="radio"]{display: none;}</style>

?

原文作者：千里追風(fēng)，原文地址：www.jianshu.com/p/cf5b4f6b0b68(來之微信公眾號(hào)：前端大全)

總結(jié)

以上是生活随笔為你收集整理的CSS3-实现单选框radio的小动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。