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

简介: 在微信上看到一个教程文,觉得制作的小动画还是很有意思的,自己也试验了一下。一开始动画怎么都不执行(我用的HB),因为内置浏览器对css3的不兼容。加上各种浏览器前缀后就好了。但是旋转那个效果,在HB里还是不能正常播放。

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

目录
相关文章
|
2月前
|
机器学习/深度学习 前端开发 JavaScript
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
|
2月前
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解,并采取适当的策略和方法。通过不断的实践和优化,你可以在各种浏览器上创造出流畅、美观且兼容的动画效果,为用户带来更好的体验。在实际开发中,要密切关注浏览器的发展动态,及时掌握最新的兼容性技巧和解决方案,以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
107 58
|
13天前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
21 1
|
17天前
|
Web App开发 前端开发 JavaScript
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
如何在不牺牲动画效果的前提下,优化 CSS3 动画的性能?
36 1
|
2月前
|
前端开发 JavaScript API
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能,展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力,实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API,并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例,展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后,还演示了如何将这种 3D 翻卡效果集成到公司网站中,提升用户体验。CSS Houdini 的创新能力为网页设计带来了前所未有的灵活性,推动了前端开发迈向新的高度。
34 0
探索 CSS Houdini:轻松构建酷炫的 3D 卡片翻转动画
|
3月前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
50 0
JS配合CSS3实现动画和拖动小星星小Demo
|
2月前
|
前端开发
CSS 动画介绍及语法
CSS 动画介绍及语法
29 0
|
4月前
|
前端开发 UED 开发者
有趣的CSS - 文字加载动画效果
这个文本加载动画简单而有趣,可以在网站标题、广告标语或者关键信息的展示上吸引用户的注意力。开发者可以根据需要调整动画的持续时间、步骤数,或者光标颜色等,来适应特定的设计需求。使用这种动态元素,增强网站的互动性和用户体验,同时也为网站增添了一抹活泼的风格。
97 5
|
4月前
|
前端开发 JavaScript
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!
HTML+CSS如何打造撒花动画效果?3分钟学会,炫酷到爆!