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%;
}</p> <p>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基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
详解Canvas事件绑定
Jun 27 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例
Apr 24 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
Apr 24 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 #HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 #HTML / CSS
You might like
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP得到mssql的存储过程的输出参数功能实现
2012/11/23 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
vue中el-upload上传图片到七牛的示例代码
2018/10/19 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
js实现微信聊天界面
2020/08/09 Javascript
Python中django学习心得
2017/12/06 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
实现向右循环移位
2014/07/31 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
大学军训通讯稿
2014/01/13 职场文书
旅游个人求职信范文
2014/01/30 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
Python类方法总结讲解
2021/07/26 Python
MySQL利用UNION连接2个查询排序失效详解
2021/11/20 MySQL
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android