在微信上看到一个教程文，觉得制作的小动画还是很有意思的，自己也试验了一下。一开始动画怎么都不执行（我用的HB），因为内置浏览器对css3的不兼容。加上各种浏览器前缀后就好了。但是旋转那个效果，在HB里还是不能正常播放。
总结就是：1，学习到了css3的伪类选择器还可以这样用！2，css3的动画设置还可以这样搭配！3，label可以替代radio。如果正常情况下让我想一个给radio
加动画的方法，我肯定不会想到把radio隐藏的！这是欲擒故纵啊。。。。
以下是代码：
<div class="radio1"> <h1>缩放动画</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>旋转动画</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隐藏起来，因为选中label就会选中对应的额radio，所以用户不必直接选radio了，而是通过label变相的来选中radio。但好处就是label可以加动画样式。*/ /*给label的后边加一个动画*/ .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; } /*把小黑点做出来，缩放为0.做出来的方法，是在label的后边加上了一个空伪类，然后填充颜色*/ .radio1 input[type="radio"]:checked+ label { /*这既是灵活运用伪类选择器和兄弟选择器了。checked表示被选中的那个radio，+表示那个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自己练习旋转动画*/ .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>
原文作者：千里追风，原文地址：www.jianshu.com/p/cf5b4f6b0b68(来之微信公众号：前端大全)
