CSS3实现复选框动画特效示例代码


Posted in HTML / CSS onSeptember 27, 2016

先看我们的第一个特效图

CSS3实现复选框动画特效示例代码

实例代码

复制代码
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CheckBox</title>
<style>
.checkbox {
width: 900px;
padding: 3% 0%;
margin: 50px auto;
background-color: cornsilk;
text-align: center;
}</p> <p> .checkbox label {
display: inline-block;
width: 64px;
height: 32px;
margin-right: 10px;
background-color: #ffffff;
border: 1px solid #eeeeee;
border-radius: 17px;
cursor: pointer;
position: relative;
transition: background-color .2s ease-in;
}</p> <p> .checkbox label:after {
content: "";
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #eeeeee;
position: absolute;
left: 1px;
top: 1px;
transform: translateX(0px);
transition: transform .2s ease-in;
}</p> <p> .checkbox [type="checkbox"]:checked + label {
background-color: khaki;
transition: background-color .2s ease-in;
}</p> <p> .checkbox [type="checkbox"]:checked +label:after{
transform: translateX(30px);
transition: transform .2s ease-in;
}</p> <p> .checkbox [type="checkbox"]{
display: none;
}
</style>
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="checkbox-1">
<label for="checkbox-1"></label></p> <p> <input type="checkbox" id="checkbox-2">
<label for="checkbox-2"></label></p> <p> <input type="checkbox" id="checkbox-3">
<label for="checkbox-3"></label>
</div></p> <p></body>
</html>

再来看我们的第二个特效图

CSS3实现复选框动画特效示例代码

实例代码

复制代码
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.checkbox {
width: 900px;
padding: 3% 0px;
margin: 50px auto;
background-color: cornsilk;
text-align: center;
}</p> <p> .checkbox label {
position: relative;
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
overflow: hidden;
border: 1px solid #eeeeee;
background-color: #ffffff;
cursor: pointer;
}</p> <p> .checkbox label:after {
content: "√";
position: absolute;
width: 28px;
height: 28px;
line-height: 26px;
background-color: khaki;
color: #ffffff;
left: 1px;
top: 1px;
text-align: center;
transform: translateY(-30px);
transition: transform .2s ease-out;
border-radius: 4px;
}</p> <p> .checkbox [type="checkbox"]:checked + label:after {
transform: translateY(0px);
transition: transform .2s ease-in;
}
.checkbox [type="checkbox"]{
display: none;
}
</style>
</head>
<body>
<div class="checkbox">
<input type="checkbox" id="checkbox-1" checked="checked">
<label for="checkbox-1"></label></p> <p> <input type="checkbox" id="checkbox-2">
<label for="checkbox-2"></label></p> <p> <input type="checkbox" id="checkbox-3">
<label for="checkbox-3"></label>
</div></p> <p></body>
</html>

总结
以上代码理解起来并不难,但是实现的效果却非常的不错,希望对大家学习或者使用CSS3能有所帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
利用CSS3伪元素实现逐渐发光的方格边框
May 07 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
Dec 11 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 #HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 #HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 #HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 #HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 #HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 #HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 #HTML / CSS
You might like
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
javascript基本类型详解
2014/11/28 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
2018/03/03 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
python实现文本去重且不打乱原本顺序
2016/01/26 Python
Python中的变量和作用域详解
2016/07/13 Python
python 调用c语言函数的方法
2017/09/29 Python
python函数不定长参数使用方法解析
2019/12/14 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python识别处理照片中的条形码
2020/11/16 Python
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
施工安全协议书
2013/12/11 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
寄语学生的话
2014/04/10 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
村创先争优活动总结
2014/08/28 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
副总经理岗位职责
2015/02/02 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书