CSS3-实现单选框radio的小动画

在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下。一开始动画怎么都不执行(我用的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(来之微信公众号:前端大全)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏图像识别与深度学习

《Android》Lesson11-UI布局

2288
来自专栏数据小魔方

打破常规的图表制作新思维!!!

上一篇给大家讲了一个专业、规范、完善的商务图表的元素应该如何布局! 可能很多小伙伴儿会有疑问,默认的输出图表样式跟最终我们想要达到的效果相差十万八千里。想要在...

3537
来自专栏君赏技术博客

AutoLayout简洁之道

1.是IOS8新出的,属于表格一样的布局,我们暂时不用多管。 2.是进行两个试图进行约束的 3.是对于单个试图进行约束的,默认相对于父试图。 4.是对于约...

1062
来自专栏十月梦想

移动端适配之百分比适配

前面简单了了解了一下移动端,包括移动端的设备独立像素,物理像素,渲染像素以及像素比(DPR)等相关知识!接下来简单介绍一个比较简单的移动端适配方案!

1523
来自专栏九彩拼盘的叨叨叨

学习纲要:常见标签和属性

922
来自专栏Coco的专栏

【前端攻略】最全面的水平垂直居中方案与flexbox布局

1843
来自专栏编程之路

羊皮书APP(Android版)开发系列(二十四)不常用但是很有用的两个属性:clipToPadding 和 clipChildren

1502
来自专栏十月梦想

jquery基础选择器

这里的基础用法和css的选取方式一致,对于css选择器熟悉的朋友这里使用简直小意思,下面几篇博文我们来详谈jq的高级选择器!

832
来自专栏编程坑太多

如何开发适配安卓和iOS双平台的React Native应用

1292
来自专栏编程

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

2085

扫码关注云+社区

领取腾讯云代金券