之前我们分享过一些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单选框的更多相关文章

  1. CSS3自定义发光radiobox单选框

    在线演示 本地下载

  2. 基于CSS3自定义美化复选框Checkbox组合

    今天我们要来分享一组非常漂亮的CSS3自定义复选框checkbox,每一个checkbox都有其各自的特点.有几款checkbox在选中的情况下还会出现动画效果,非常不错的CSS3自定义美化check ...

  3. vue2实现自定义样式radio单选框

    先上效果 <div class="reply"> 主编已回复: <div class="radio-box" v-for="(ite ...

  4. CSS3自定义checkbox复选框

    在线演示 本地下载

  5. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  6. 纯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 ...

  7. （七）对话框，单选框(radiobox)，复选框(checkbox)，列表框(ListBox)，组合框(CComboBox)，水平滚动条(Horizontal scroll bar)，微调(旋转)spincontrol，列表视图控件CListCtrl，静态控件static

    1,模态对话框和非模态对话框 // 模态对话框 void CMainFrame::OnDialogExec() { // TODO: 在此添加命令处理程序代码 // 创建对话框对象 CDialog d ...

  8. 复选框(checkbox)、单选框（radiobox）的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

  9. CSS学习笔记三：自定义单选框，复选框，开关

    一点一点学习CCS,这次学习了如何自定义单选框,复选框以及开关. 一.单选框 1.先写好body里面的样式,先写几个框 <body> <div class="radio-1 ...

随机推荐

  1. Dubbo Monitor 配置

    1. Dubbo Monitor 下载dubbo-monitor-simple-2.5.3-assembly.tar.gz 链接:http://pan.baidu.com/s/1gf88wDX 密码: ...

  2. iOS 图片部分模糊，类似于美图秀秀

    代码地址如下:http://www.demodashi.com/demo/14277.html 演示效果 演示效果 代码结构 项目结构截图如下: 该模块的核心源码部分为 MBPartBlurView, ...

  3. MySQL-关于事务的使用

    如果你一次执行单条查询语句, 则没有必要启用事务支持, 数据库默认支持SQL执行期间的读一致性, 如果你一次执行多条查询语句, 例如统计查询, 报表查询, 在这种场景下, 多条查询SQL必须保证整体的 ...

  4. 使用WinSCP连接linux

    1.运行WinSCP工具,新建站点,输入主机名.用户名.密码,点击“保存(S)...”按钮 2.点击“确定”按钮,保存站点信息 3.选择左侧列表中的“root@192.168.67.2”这一项,然后点 ...

  5. VMWare安装Linux系统之CentOS-6.6操作方法。

    1.使用VMWare创建新的虚拟主机 2.使用VMWare安装Linux,点击“开启虚拟主机” 3.进入Linux安装界面,选择第一项"Install or upgrade an exist ...

  6. surging+CentOS7+docker+rancher2.0 菜鸟部署运行笔记

    https://blog.csdn.net/q5934/article/details/82661250 目录 准备工作 开始干活 1.从github 获取surging源码 2.发布Surging. ...

  7. win7 64 安装scikit-learn

    1. scikit-learn简单介绍 scikit-learn是一个基于NumPy.SciPy.Matplotlib的开源机器学习工具包.採用Python语言编写.主要涵盖分类. 回归和聚类等算法, ...

  8. C# 获取方法内参数名称

    public partial class Main : Form { public Main() { foreach(var parameter in typeof(Main).GetMethod(& ...

  9. Apache 隐藏 index.php，如将 tp5.com/index.php/hello/123 变成 tp5.com/hello/123

          以Apache为例,需要在index.php入口文件的同级添加.htaccess文件,内容如下: <IfModule mod_rewrite.c> Options +Follo ...

  10. java读取url中json文件中的json数据

    有时候需要远程从其他接口中获取json数据,如果遇到返回的json数据是一个文件而不直接是数据,那么可以通过以下方法进行读取: /** * 从数据接口获取到数据 * @return * @throws ...