纯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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 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
php5数字型字符串加解密代码
2008/04/24 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
javascript 一些用法小结
2009/09/11 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
Javascript实现颜色rgb与16进制转换的方法
2015/04/18 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
几种tab切换详解
2017/02/03 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
如何理解Vue的.sync修饰符的使用
2017/08/17 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python爬虫自动创建文件夹的功能
2018/08/01 Python
python散点图实例之随机漫步
2018/08/27 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
Java如何获得ResultSet的总行数
2016/09/03 面试题
公司财务流程之主管工作流程
2014/03/03 职场文书
清正廉洁演讲稿
2014/05/22 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2014年纠风工作总结
2014/12/08 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
创业计划书之美甲店
2019/09/20 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS