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属性选择符介绍
Oct 17 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
10 套华丽的CSS3 按钮小结
Oct 03 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS实现进度条和订单进度条的示例
Nov 05 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 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
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
javascript 一段左右两边随屏滚动的代码
2009/06/18 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jQuery圆形统计图开发实例
2015/01/04 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
javascript每日必学之多态
2016/02/23 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
2018/04/24 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Vue项目中使用WebUploader实现文件上传的方法
2019/07/21 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
同学会邀请书大全
2014/01/12 职场文书
中学生班主任评语
2014/01/30 职场文书
高中运动会前导词
2015/07/20 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫