基于CSS3自定义发光radiobox单选框
之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox,比如纯CSS3美化Checkbox和Radiobox按钮,不仅外观唯美,而且Radiobox选中时还有动画效果。今天我们要来分享一款CSS3实现的自定义发光radiobox单选框插件,该radiobox选中时也有滑块的动画特效。
实现的代码。
html代码:
<style>
html
{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
body
{
padding: 50px;
background-color: hsl(0,0%,20%);
}
input
{
-webkit-appearance: none; /* remove default */
display: block;
margin: 10px;
width: 24px;
height: 24px;
border-radius: 12px;
cursor: pointer;
vertical-align: middle;
box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
background-color: hsla(0,0%,0%,.2);
background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );
background-repeat: no-repeat;
-webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1), -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
}
input:checked
{
-webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1), -webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}
input:active
{
-webkit-transform: scale(1.5);
-webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}
/* The up/down direction logic */input, input:active
{
background-position: 0 24px;
}
input:checked
{
background-position: 0 0;
}
input:checked ~ input, input:checked ~ input:active
{
background-position: 0 -24px;
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
<div style="margin: 30px auto; width: 80px;">
<input type="radio" name="name" checked />
<input type="radio" name="name" />
<input type="radio" name="name" />
<input type="radio" name="name" />
<input type="radio" name="name" />
</div>
<script src="js/index.js"></script>
</body>
via:http://www.w2bc.com/Article/32018/
基于CSS3自定义发光radiobox单选框的更多相关文章
- CSS3自定义发光radiobox单选框
在线演示 本地下载
- 基于CSS3自定义美化复选框Checkbox组合
今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化check ...
- vue2实现自定义样式radio单选框
先上效果 <div class="reply"> 主编已回复: <div class="radio-box" v-for="(ite ...
- CSS3自定义checkbox复选框
在线演示 本地下载
- 10个HTML5美化版复选框和单选框
单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...
- 纯CSS3来自定义单选框radio与复选框checkbox
单选框(radio)自定义样式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3 ...
- (七)对话框,单选框(radiobox),复选框(checkbox),列表框(ListBox),组合框(CComboBox),水平滚动条(Horizontal scroll bar),微调(旋转)spincontrol,列表视图控件CListCtrl,静态控件static
1,模态对话框和非模态对话框 // 模态对话框 void CMainFrame::OnDialogExec() { // TODO: 在此添加命令处理程序代码 // 创建对话框对象 CDialog d ...
- 复选框(checkbox)、单选框(radiobox)的使用
复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...
- CSS学习笔记三:自定义单选框,复选框,开关
一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...
随机推荐
- Linux下通用线程池的创建与使用
线程池:简单地说,线程池 就是预先创建好一批线程,方便.快速地处理收到的业务.比起传统的到来一个任务,即时创建一个线程来处理,节省了线程的创建和回收的开销,响应更快,效率更高. 在linux中,使用的 ...
- Android蓝牙A2DP连接实现
代码地址如下:http://www.demodashi.com/demo/14624.html 开发环境: 开发工具:Androidstudio 适配机型:honor8(Android6.0), 坚果 ...
- 关于highstock横坐标的一些的一些说明(1)使用UTC时间
highstock的数据格式采用的是[[时间,数据],[时间,数据],[时间,数据],[时间,数据]],而时间采用的是13位的毫秒值,如[1133136000000,69.66],采用的时间格式为UT ...
- FZU - 2039 Pets (二分图匹配 2011年全国大学生程序设计邀请赛(福州))
Description Are you interested in pets? There is a very famous pets shop in the center of the ACM ci ...
- MyEcplise安装Freemarker插件(支持.ftl文件)
1.下载插件:http://sourceforge.net/projects/freemarker-ide/?source=typ_redirect 2.下载freemarker-2.3.19.jar ...
- 用curl去探测接口是否正常返回结果,若没有正常返回则触发报警
现有一需求去curl 在香港的一个接口, 返回值有时正常有时报错 connection reset by peer . 思路: 若 执行成功 $?返回 0 , 不成功则返回其他数字 #!/bin/b ...
- cout printf 莫明奇妙的崩溃问题
出现异常主要表现 导致异常的关键代码不是因为printf 或cout,而是因为使用栈空间超出的原因 下图试图在栈上分配1024000个char的空间,确发现崩溃 的位置是printf,这就是这个问题难 ...
- Linux内核中锁机制之信号量、读写信号量
在上一篇博文中笔者分析了关于内存屏障.读写自旋锁以及顺序锁的相关内容,本篇博文将着重讨论有关信号量.读写信号量的内容. 六.信号量 关于信号量的内容,实际上它是与自旋锁类似的概念,只有得到信号量的进程 ...
- POJ 3254 简单状压DP
没什么可说的,入门级状压DP.直接撸掉 #include <iostream> #include <cstring> #include <cstdlib> #inc ...
- 【驱动笔记11】使用DeviceIoControl通信
文章作者:grayfox作者主页:http://nokyo.blogbus.com原始出处:http://www.blogbus.com/nokyo-logs/34018521.html 在我昨日发布 ...