纯css3实现效果超级炫的checkbox复选框和radio单选框


Posted in HTML / CSS onSeptember 01, 2014

之前为大家分享了好多css3实现的按钮。今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫。先让我们看看图吧!
纯css3实现效果超级炫的checkbox复选框和radio单选框 

源码下载
这个实例完全由css3实现的没有任何js代码。下面我们一起看下实现代码吧

html代码:

复制代码
代码如下:

<div style="width:200px; float:left">
<label>
<input type="checkbox" class="option-input checkbox" checked="">
Checkbox
</label>
<label>
<input type="checkbox" class="option-input checkbox">
Checkbox
</label>
<label>
<input type="checkbox" class="option-input checkbox">
Checkbox
</label>
</div>
<div style="width:200px; float:left">
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
<label>
<input type="radio" class="option-input radio" name="example">
Radio option
</label>
</div>

css3代码:
复制代码
代码如下:

@-webkit-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-moz-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@-o-keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
@keyframes click-wave {
0% {
width: 40px;
height: 40px;
opacity: 0.35;
position: relative;
}
100% {
width: 200px;
height: 200px;
margin-left: -80px;
margin-top: -80px;
opacity: 0.0;
}
}
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
top: 13.33333px;
width: 40px;
height: 40px;
-webkit-transition: all 0.15s ease-out 0;
-moz-transition: all 0.15s ease-out 0;
transition: all 0.15s ease-out 0;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
position: relative;
margin-right: 0.5rem;
z-index: 1000;
}
.option-input:hover {
background: #9faab7;
}
.option-input:checked {
background: #40e0d0;
}
.option-input:checked::before {
width: 40px;
height: 40px;
position: absolute;
content: '\2716';
display: inline-block;
font-size: 26.66667px;
text-align: center;
line-height: 40px;
}
.option-input:checked::after {
-webkit-animation: click-wave 0.65s;
-moz-animation: click-wave 0.65s;
animation: click-wave 0.65s;
background: #40e0d0;
content: '';
display: block;
position: relative;
z-index: 100;
}
.option-input.radio {
border-radius: 50%;
}
.option-input.radio::after {
border-radius: 50%;
}
body {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-align: stretch;
-moz-box-align: stretch;
box-align: stretch;
background: #e8ebee;
color: #9faab7;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
body div {
padding: 5rem;
}
body label {
display: block;
line-height: 40px;
}

是不是很简单。只要复制上面的html代码和css代码到页面上。运行就可以看到效果了。赶紧试一试吧。哈哈
HTML / CSS 相关文章推荐
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
html5 canvas实现圆形时钟代码分享
Dec 25 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
html5拖拽应用记录及注意点
May 27 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
使用CSS实现按钮边缘跑马灯动画
May 07 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 #HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 #HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 #HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 #HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 #HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 #HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 #HTML / CSS
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php远程下载类分享
2016/04/13 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
JavaScript计算某一天是星期几的方法
2015/08/05 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
基于JS实现Android,iOS一个手势动画效果
2016/04/27 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python切片操作深入详解
2018/07/27 Python
新年快乐! python实现绚烂的烟花绽放效果
2019/01/30 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
介绍一下linux的文件系统
2015/10/06 面试题
企业车辆管理制度
2014/01/24 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
创先争优活动心得体会
2014/09/04 职场文书
给下属加薪申请报告
2015/05/15 职场文书
摘录式读书笔记
2015/07/01 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Nginx实现会话保持的两种方式
2022/03/18 Servers