带点击动画特效的CSS3单选框和复选框

当前位置:主页 > CSS3库 > CSS3动画 > 带点击动画特效的CSS3单选框和复选框
带点击动画特效的CSS3单选框和复选框
分享:

    插件介绍

    这是一款带点击动画特效的CSS3单选框和复选框。该特效在用户点击单选框或复选框时,会带有漂亮的动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:06-23
    阅读:
简要教程

这是一款带点击动画特效的CSS3单选框和复选框。该特效在用户点击单选框或复选框时,会带有漂亮的动画效果。

使用方法

在页面中引入style.css。

<link href="css/style.css" rel="stylesheet">
                
HTML结构

带点击动画特效的CSS3单选框和复选框

使用该带点击动画特效的CSS3单选框和复选框的基本HTML结构如下:

复选框:

<input type="checkbox" checked>
<input class="indeterminate" type="checkbox">
<input type="checkbox">
                

单选框:

<input type="radio" name="group1">
<input type="radio" name="group1">
<input type="radio" name="group1" checked>                    
                

有四种颜色可以选择:blue、red、orange和默认的绿色。

<input class="blue" type="checkbox">
<input class="blue" type="radio" name="group4">

<input class="red" type="checkbox">
<input class="red" type="radio" name="group4">

<input class="orange" type="checkbox">
<input class="orange" type="radio" name="group4">                    
                

该带点击动画特效的CSS3单选框和复选框的codepen地址为:https://codepen.io/AlexTorresSk/pen/QmYEav