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旋转动画实例代码
Sep 11 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 HTML / CSS
html5实现点击弹出图片功能
Jul 16 HTML / CSS
HTTP中的Content-type详解
Jan 18 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
eAccelerator的安装与使用详解
2013/06/13 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
2017/06/28 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
js实现黑白div块画空心的图形
2018/12/13 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
大学生职业生涯规划书范文
2014/01/14 职场文书
公司经理聘任书
2014/03/29 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
铁路安全反思材料
2014/12/24 职场文书
人民的好儿女观后感
2015/06/18 职场文书
安全教育培训心得体会
2016/01/15 职场文书
浅谈Python numpy创建空数组的问题
2021/05/25 Python