纯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效果:自定义“W”形运行轨迹实例
Mar 29 HTML / CSS
CSS3动画特效在活动页中的应用
Jan 21 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 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 获得汉字拼音首字母的函数
2009/08/01 PHP
PHP中的string类型使用说明
2010/07/27 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
js 小数取整的函数
2010/05/10 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
js确定对象类型方法
2012/03/30 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
js图片延迟技术一般的思路与示例
2014/03/20 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
javascript事件模型介绍
2016/05/31 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
详解python字节码
2018/02/07 Python
解决python super()调用多重继承函数的问题
2019/06/26 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
前台领班岗位职责
2013/12/04 职场文书
社区戒毒工作方案
2014/06/04 职场文书
百年校庆感言
2015/08/01 职场文书
Java 在生活中的 10 大应用
2021/11/02 Java/Android
python三子棋游戏
2022/05/04 Python