CSS3复选框动画
2024-08-22 02:44:47
本示例实现了两种单选按钮动画效果，一种是移动，一种是滑块，以下是html布局以及css样式
html：这里使用了label标签的for属性，以此来绑定radio
<div class="checkbox-1">
<input type="checkbox" name="checkbox-1" id="checkbox-1-1" checked="checked">
<label for="checkbox-1-1"></label> <input type="checkbox" name="checkbox-1" id="checkbox-1-2">
<label for="checkbox-1-2"></label> <input type="checkbox" name="checkbox-1" id="checkbox-1-3">
<label for="checkbox-1-3"></label>
</div>
<div class="checkbox-2">
<input type="checkbox" name="checkbox-2" id="checkbox-2-1" checked="checked">
<label for="checkbox-2-1"></label> <input type="checkbox" name="checkbox-2" id="checkbox-2-2">
<label for="checkbox-2-2"></label> <input type="checkbox" name="checkbox-2" id="checkbox-2-3">
<label for="checkbox-2-3"></label>
</div>
css
<style type="text/css">
.checkbox-1{
width: 980px;
margin: 0 auto;
text-align: center;
padding: 3% 0;
background-color: #99cccc;
}
.checkbox-1 label{
display: inline-block;
width: 10px;
height: 10px;
padding: 9px;
border: 1px #cccccc solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #ffffff;
color: #333;
margin-right: 10px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.checkbox-1 [type="checkbox"]{
display: none;
}
.checkbox-1 label:after{
content: 'X';
font-family: Arial;
color: #ffffff;
background-color: #399;
position: absolute;
top: 1px;
left: 1px;
width: 26px;
height: 26px;
line-height: 26px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-align: center;
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
-o-transform: translateY(-30px);
transform: translateY(-30px);
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-ms-transition: -ms-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
}
.checkbox-1 [type="checkbox"]:checked + label:after{
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform .2s ease-in;
-moz-transition: -moz-transform .2s ease-in;
-ms-transition: -ms-transform .2s ease-in;
-o-transition: -o-transform .2s ease-in;
transition: transform .2s ease-in;
} .checkbox-2{
width: 980px;
margin: 0 auto;
text-align: center;
padding: 3% 0;
background-color: #99cccc;
}
.checkbox-2 label{
display: inline-block;
width: 68px;
height: 34px;
border: 1px #cccccc solid;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
background-color: #ffffff;
margin-right: 10px;
position: relative;
cursor: pointer;
-webkit-transition: background-color .2s ease-in;
-moz-transition: background-color .2s ease-in;
-ms-transition: background-color .2s ease-in;
-o-transition: background-color .2s ease-in;
transition: background-color .2s ease-in;
}
.checkbox-2 [type="checkbox"]{
display: none;
}
.checkbox-2 label:after{
content: '';
position: absolute;
left: 1px;
top: 1px;
width: 30px;
height: 30px;
border: 1px #e0e0e0 solid;
background-color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-transition: left .2s ease-in;
-moz-transition: left .2s ease-in;
-ms-transition: left .2s ease-in;
-o-transition: left .2s ease-in;
transition: left .2s ease-in;
}
.checkbox-2 [type="checkbox"]:checked + label{
background-color: #33cc66;
-webkit-transition: background-color .2s ease-in;
-moz-transition: background-color .2s ease-in;
-ms-transition: background-color .2s ease-in;
-o-transition: background-color .2s ease-in;
transition: background-color .2s ease-in;
}
.checkbox-2 [type="checkbox"]:checked + label:after{
left: 35px;
-webkit-transition: left .2s ease-in;
-moz-transition: left .2s ease-in;
-ms-transition: left .2s ease-in;
-o-transition: left .2s ease-in;
transition: left .2s ease-in;
}
</style>
最新文章
- linux中redis的php扩展安装
- Android Studio代码混淆插件
- spark streaming 实战
- ASP.NET的简单与面向对象开发
- Warning:mailcious javascript detected on this domain来由
- Android Adapter的getViewTypeCount和getItemViewType
- ionic中修改图标的问题
- nginx log日志分割
- Python基础第四天
- NM常用网络命令
- vsftp之虚拟用户
- socket聊天室（服务端）（多线程）（TCP）
- hibernate框架学习笔记4：主键生成策略、对象状态
- mysql（2）—— 由笛卡尔积现象分析数据库表的连接
- python2 线程基础
- PHP7.X连接SQLSERVER数据库（CENTOS7）
- 【学习】数据规整化：清理、转换、合并、重塑【pandas】
- Windows SubSystem for Linux
- ABP Quartz 作业调度第三篇
- shell脚本--数值比较