仿iPhone的switch开关

最新推荐文章于 2022-11-01 13:50:07 发布

Aus0049

最新推荐文章于 2022-11-01 13:50:07 发布

阅读量1.0k

点赞数

分类专栏： CSS 文章标签： CSS3

本文链接：https://blog.csdn.net/u014267351/article/details/50599121

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

看到很多iPhone上的滑动开关效果的button，今天终于有时间搞一下

其实很简单，也不难就是大量用到了CSS3的属性，不需要引入图片，但是要一点JS来控制

贴上效果图：

开启的时候

关闭的效果

代码在这里：

<!DOCTYPE html>
<html>
<head>
    <title>anmiation</title>
    <!-- 让IE采用最新的渲染模式 -->
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <!-- 移动端的页面宽度等于设备宽度，缩放比为1 -->
    <meta name="viewport" content="width=device-width" initial-scale="1">
    <meta charset="utf-8">

</head>
<style type="text/css" media="screen">
.switch-bg {
    width: 150px;
    height: 50px;
    background: #76d95c;
    border-radius: 50px;
    box-shadow:inset 0px 0px 3px;
    transition:all 0.5s;
}
.switch-block {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: 1px 3px 5px;
    transition:all 0.5s;
}
.turn-off {
    background: #ffffff;
}
.turn-off>.switch-block {
    left: 99px;
}
</style>
<body>
    <div class="switch-bg">
        <div class="switch-block"></div>
    </div>
    <script src="js/jquery-1.6.4.js"></script>
    <script>
    $(".switch-bg").click(function(){
        if($(this).hasClass("turn-off")){
            $(this).removeClass("turn-off");
            return;
        }
        $(this).addClass("turn-off");
    });
    </script>
</body>
</html>

用到了一点点的jquery

点击可以实现滑动哦