利用css3动画效果编写滑动按钮开关

原创 2016年08月31日 10:10:42

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3做的滑动开关效果</title>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<style>
.switch{
    width: 100px;
    margin: 100px 0px 0 100px;
}
.btn_fath{
  margin-top: 10px;
  position: relative;
  border-radius: 20px;
}

.on.btn_fath {
  background-color: #5281cd;
}
.on.active.btn_fath {
  background-color: #828282;
}

.off.btn_fath {
  background-color: #828282;
}
.off.active.btn_fath {
  background-color: #5281cd;
}


.btn1{
  float: left;
}

.btn2{
  float: right;
}

.switchBtn{
  height: 40px;
  width: 50px;
  border:none;
  color: #fff;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  z-index: 1;
}

.move{
  width: 40px;
  height: 40px;
  position: absolute;
  border-radius: 20px;
  z-index: 100;
  border: 1px solid #828282;
  background-color: #f1eff0;
  cursor: pointer;
  box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999;
  transition:transform ease 0.5s ;
}

.on .move{
  left: 60px;
}
.off .move{
  left: 0;
}
.active.on .move{
  transform: translate(-60px,0px);
}

.active.off .move{
  transform: translate(60px,0px);
}

</style>
<body>

<div class="switch">
  <div class="btn_fath clearfix la_state" onclick="toogle(this)">
    <div class="move"></div>
    <div class="switchBtn btn1">ON</div>
    <div class="switchBtn btn2 ">OFF</div>
  </div>

  <div class="btn_fath clearfix yj_state" onclick="toogle(this)">
    <div class="move"></div>
    <div class="switchBtn btn1">ON</div>
    <div class="switchBtn btn2 ">OFF</div>
  </div>
</div>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">

//初始化页面开关是on 还是off状态的
$(function(){
  $(".la_state").addClass("on");
  $(".yj_state").addClass("off");
})


function toogle(th){
  var ele = $(th);
  ele.toggleClass('active');
}

</script>
</body>
</html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

一个扁平化的H5按钮

>                 登录           #setting ul li a { display: block; float: left; height: 50px; back...
  • developerof
  • developerof
  • 2016年03月12日 12:46
  • 2951

H5移动web页面触摸按钮效果实现-模拟按钮hover效果实现

移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下: ...
  • u011388741
  • u011388741
  • 2016年02月14日 16:52
  • 14840

纯CSS3实现滑动开关效果

实现效果如下: HTML结构代码:       CSS代码: /*表单开关样式*/ ...
  • huangyibin628
  • huangyibin628
  • 2015年08月17日 11:56
  • 5094

仿微信 滑动 开关

  • 2014年12月03日 17:50
  • 1.48MB
  • 下载

css模拟手机滑动开关

参考文章: http://www.cnblogs.com/libin-1/p/6006034.html示例代码: CSS3模拟IOS开关 ...
  • xyr05288
  • xyr05288
  • 2017年01月20日 18:15
  • 319

HMTL实现类移动端的滑动开关——前端掉坑记

为了把开关做得更加美观,不用之前一直用的简单的打勾的checkbox,而是要做成像手机选项开关那种样式。效果图如下:首先,你可能搜不到我这篇文章,因为,你不知道这个叫滑动开关。我拿着这东西去问前端,他...
  • iaiti
  • iaiti
  • 2016年06月17日 18:43
  • 3110

利用jquery做的滑动按钮开关

代码: jquery做的滑动按钮开关 .switch{ width: 100px; margin: 100px 0px 0 100px; } ....
  • qq_30337695
  • qq_30337695
  • 2016年09月02日 09:58
  • 3956

利用swiper和css3实现手机滑屏与动画效果

很多人前端工程师在做一些手机滑屏类的落地窗页面,并且带有一堆动画时都是一脸懵逼,好复杂啊,js该怎么写?一堆问题,但是其实想实现这些功能非常简单。只需要大家灵活运用swiper和css3的animat...
  • qq_33401924
  • qq_33401924
  • 2016年09月28日 11:03
  • 2102

自定义左右按钮选择控件

public class UISwitchButton extends CheckBox { private Paint mPaint; private RectF mSaveLayerRectF...
  • languobeibei
  • languobeibei
  • 2017年03月10日 14:55
  • 570

b+c 模式 H5 与 Android 混合 开发详解

h5 ios android 简介: 概念: 加载网址 加载网页 加载网页字符串 点击内容的时候 会调到浏览器 我们可以让其在当前页展示:h5 可以利用Web...
  • java_goodstudy
  • java_goodstudy
  • 2016年03月28日 21:08
  • 2089
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用css3动画效果编写滑动按钮开关
举报原因:
原因补充:

(最多只允许输入30个字)