利用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>


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

相关文章推荐

纯CSS3实现滑动开关效果

实现效果如下: HTML结构代码:       CSS代码: /*表单开关样式*/ ...

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

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

css3动画与动效--按钮元素动画效果

css3动画与动效 1.按钮元素动画效果  例:鼠标移到链接上从白色慢慢过渡到黑色-----运用transition:all .5s;当超链接元素中任何属性发生变化,都以动画形式呈现,动画的时间为...

27个精致的CSS3动画效果

  • 2017年08月23日 09:08
  • 62.53MB
  • 下载

好玩的css3动画效果

  • 2017年08月22日 00:33
  • 6KB
  • 下载

利用jquery做的滑动按钮开关

代码: jquery做的滑动按钮开关 .switch{ width: 100px; margin: 100px 0px 0 100px; } ....

css3动画效果

  • 2017年03月13日 16:33
  • 15KB
  • 下载

css3,js实现加载动画效果

  • 2014年10月14日 15:28
  • 3KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用css3动画效果编写滑动按钮开关
举报原因:
原因补充:

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