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弹性盒模型开发笔记(一)
Apr 26 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
javascript 三种编解码方式
2010/02/01 Javascript
Jquery 动态循环输出表格具体方法
2013/11/23 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
python3实现基于用户的协同过滤
2018/05/31 Python
python实现简易学生信息管理系统
2020/04/05 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
国窖1573广告词
2014/03/21 职场文书
校庆活动策划方案
2014/06/05 职场文书
公司任命书模板
2014/06/06 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
通信工程求职信
2014/07/16 职场文书
2014年度个人总结范文
2015/03/09 职场文书
鸡毛信观后感
2015/06/11 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
Python基础学习之奇异的GUI对话框
2021/05/27 Python