简单的css开关按钮

最新推荐文章于 2024-09-02 11:12:33 发布

qq_34788959

最新推荐文章于 2024-09-02 11:12:33 发布

阅读量636

点赞数

文章标签： css3 开关

本文链接：https://blog.csdn.net/qq_34788959/article/details/80584102

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<title></title>
<style type="text/css">
.btn{
width: 100px;
height: 50px;
border-radius: 25px;
background-color: blue;
}
.on{
position: relative;
top: 12px;
left: 5px;
color: white;
}
.circle{
width: 50px;
height: 50px;
border-radius: 25px;
background-color: darkgray;
position: relative;
top: -21px;
}
.off{
position: relative;
top: 12px;
left: 30px;
color: white;
}
.inner{
animation:change_col 0s;
-webkit-animation:change_col 0s;
animation-fill-mode: forwards;
}
.move{
animation:move_circle 0s;
-webkit-animation:move_circle 0s;
animation-fill-mode: forwards;
}
@-webkit-keyframes change_col{
from{background-color: darkslateblue;}
to{background-color: greenyellow;}
}
@-webkit-keyframes move_circle{
from{position: relative;left: 0px;}
to{position: relative; left: 50px;}
}
</style>
<script type="text/javascript">
$(function(){
$("#out").click(function(){
$(".btn").toggleClass("inner");
$(".circle").toggleClass("move");
});
});
</script>
<body>
<div class="btn" id="out">
<span class="on">ON</span>
<span class="off">OFF</span>
<div class="circle" id="inner">
</div>
</div>
</body>
</html>