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 background属性调整增强介绍
Dec 18 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
Aug 04 HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
HTML5 声明兼容IE的写法
May 16 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
Jul 11 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
Nodejs+angularjs结合multiparty实现多图片上传的示例代码
2017/09/29 NodeJs
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
决策树的python实现方法
2014/11/18 Python
python 实时遍历日志文件
2016/04/12 Python
python 重命名轴索引的方法
2018/11/10 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
解析python实现Lasso回归
2019/09/11 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
python程序输出无内容的解决方式
2020/04/09 Python
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
心理健康课教学反思
2014/02/13 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
中药专业自荐信范文
2014/03/18 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
自我管理的活动方案
2014/08/25 职场文书
个人自我剖析材料
2014/09/30 职场文书
总经理聘用协议书
2015/09/21 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书