switch开关的制作
来源:互联网 发布:淘宝图片发布行为规范 编辑:程序博客网 时间:2024/04/28 08:16
HTML代码:
<div class="container">
<div class="bg_con">
<input id="checked_1" type="checkbox" class="switch" />
<label for="checked_1"></label>
</div>
</div>
CSS代码:
<style type="text/css" rel="stylesheet">
.switch{
display:none;
}
label{
position:relative;
display: block;
padding: 1px;
border-radius: 24px;
height: 22px;width:40px;
margin-bottom: 15px;
background-color: #b0b0b0;
cursor: pointer;
vertical-align: top;
-webkit-user-select: none;
user-select: none;
}
label:before{
content: '';
display: block;
border-radius: 24px;
height: 22px;
background-color: white;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
label:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
margin-top: -11px;
margin-left: -11px;
width: 22px;
height: 22px;
border-radius: 22px;
background-color: white;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
border:1px solid green;
}
.switch:checked~label:after{
-webkit-transform: translateX(9px);
transform: translateX(9px);
}
.switch:checked~label:before{
background-color:green;
}
</style>
效果图:
扩展:①A~B{ }表示A之后出现的所有B,且A、B有相同的父元素。
②transition:all 0.3s ease 过渡。transition-property:all/属性 transition-duration:多长时间完成该动画。transition-timing-function:ease/速度曲线 transition-delay:延迟多长时间执行.
③transform:转变。transform:translateX(x); //x轴平移 rotate(angle);//旋转度数 scale(x,y);// 缩放
skew(x-angle,y-angle);//倾斜转换 matrix(n,n,n,n,n,n);//2D转换[矩阵]
④user-select:none;表示文本不能被选中。
- switch开关的制作
- 仿iPhone的switch开关
- switch开关
- mui js控制开关状态、修改switch开关的值
- ToggleButton(开关按钮)和Switch(开关)的使用
- 开关语句switch的几点说明
- switch(开关按钮) 控件的用法
- css3实现的switch开关按钮
- Android 开关控件Switch的简单使用
- 修改Switch开关按钮的颜色
- 自定义属性实现个性化的Switch开关
- Android 自定义Switch开关按钮的样式
- “开关”(Switch)_java
- 开关组件(Switch)
- Android自定义Switch开关
- bootstrap-switch(开关插件)
- 自定义Switch滑动开关
- Java开关语句-switch
- Python 标准输入输出 StringIO urllib- 千月的python linux 系统管理指南学习笔记(16)
- LeetCode 42 Trapping Rain Water
- linux中的&&和&,|和||
- DNSenum ---- DNS枚举工具
- 实验:android案例——新闻客户端(使用开源项目AsyncHttpClient和SmartImageView)
- switch开关的制作
- 2017(简单)
- ButterKnife的base类抽取
- 多线程等待(超时)/通知的应用场景-数据库连接池
- 修改项目的访问名称
- 【算法】程序猿不写代码是不对的61
- 23种设计模式之责任链模式
- 【不明出处】 棋盘问题
- JavaScript 获取键盘事件(键盘某个按键被按下)