CSS3-实现单选框radio的小动画
2016-09-23 15:14
239 查看
在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下。一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容。加上各种浏览器前缀后就好了。但是旋转那个效果,在HB里还是不能正常播放。
总结就是:1,学习到了css3的伪类选择器还可以这样用!2,css3的动画设置还可以这样搭配!3,label可以替代radio。如果正常情况下让我想一个给radio
加动画的方法,我肯定不会想到把radio隐藏的!这是欲擒故纵啊。。。。
以下是代码:
原文作者:千里追风,原文地址:www.jianshu.com/p/cf5b4f6b0b68(来之微信公众号:前端大全)
总结就是: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(来之微信公众号:前端大全)
相关文章推荐
- 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS
- CSS3妙用
- css笔记
- [原创]一个纯css实现兼容各种主流移动pc浏览器的时间轴
- safari下按钮样式失效
- 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少
- CSS浮动(float,clear)通俗讲解
- iOS 实现Tabbarcontroller中间自定义样式 最简单的方法
- CSS float 浮动属性
- CSS HTML元素布局及Display属性
- 使用TabPageIndicator的样式问题
- JS+CSS3实现带预览图幻灯片效果
- CSS-3D按钮实现实例(二)
- 使用纯CSS实现文字超过一定的长度后自动显示省略号
- CSS3动画文字打印效果
- 几乎所有的html + css 内容的编写, 都可以通过emmet来写
- HTML/CSS: background-clip 与 background-origin的区别
- CSS背景图片自适应、全屏、填充、拉伸
- css vertical-align属性
- css垂直居中--div