一款纯CSS3带变形动画的自定义复选框

Smooth Radio & Checkbox Inputs

css3, widget

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2666
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

li {
    list-style: none;
    font-size: 125%;
    margin-bottom: 1em;
    position: relative;
}
input[type="checkbox"],
input[type="radio"] {
    display: none;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
    padding-left: 2em;
}
input[type="checkbox"]+label:before,
input[type="checkbox"]+label:after,
input[type="radio"]+label:before {
    content: '';
    background: #ececec;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 1px solid #ccc;
    z-index: -1;
    position: absolute;
    left: 0;
    transition: all ease .5s;
}
input[type="checkbox"]+label:after {
    border-radius: 0;
}
input[type="checkbox"]:checked+label:after,
input[type="radio"]:checked+label:before {
    border-radius: 50% 0 50% 50%;
    transition: all ease .75s;
    transform: rotate( 45deg);
    background: #666;
    border: 1px solid #666;
}
input[type="checkbox"]:checked+label:before {
    transition: all ease .75s;
    border-radius: 0 50% 50% 0;
    background: #666;
    border: 1px solid #666;
}

HTML

Smooth Radio & Checkbox Inputs

css3, widget

编辑器支持Emmet

快捷键

Smooth Radio & Checkbox Inputs

css3, widget

一款带渐变消隐动画的自定义多选控件

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：