CSS3实现的开关(非常逼真)

认真你就输了丶
认真你就输了丶 发布于 2016-12-21 21:06:21 浏览:3496 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>开关</title>
    <style type="text/css" media="screen">
    html,body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: #ca9f6a;
        background: -webkit-radial-gradient(ellipse at center, #ca9f6a 0%, #ad7846 100%);
        background: radial-gradient(ellipse at center, #ca9f6a 0%, #ad7846 100%);
        font-family: "Open Sans";
    }
    .canvas {
      padding: 20px;
      text-align: center;
    }
    .switch {
      margin: 50px;
      display: inline-block;
    }
    /*.switch,
    .switch *
      box-sizing: border-box */
    .switch {
      width: 300px;
      height: 280px;
      padding: 5px 0;
      background-color: #9d9d9d;
      background-image: -webkit-linear-gradient(#b5b5b5, #cecece, #9d9d9d);
      background-image: linear-gradient(#b5b5b5, #cecece, #9d9d9d);
      border: 2px solid #916749;
      -webkit-border-radius: 45px;
      border-radius: 45px;
      -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.3), inset 0 0 3px #333;
      box-shadow: 0 5px 10px rgba(0,0,0,0.3), inset 0 0 3px #333;
      position: relative;
    }
    .switch:before {
      content: "";
      display: block;
      background-color: #ededed;
      background-image: -webkit-linear-gradient(#e6e6e6, #d5d5d5 49%, #e1e1e1);
      background-image: linear-gradient(#e6e6e6, #d5d5d5 49%, #e1e1e1);
      position: absolute;
      top: 10px;
      bottom: 5px;
      left: 3px;
      right: 3px;
      -webkit-border-radius: 45px;
      border-radius: 45px;
      -webkit-box-shadow: 0 -6px 1px rgba(255,255,255,0.65), inset 0 2px 8px #d5d5d5;
      box-shadow: 0 -6px 1px rgba(255,255,255,0.65), inset 0 2px 8px #d5d5d5;
    }
    .switch-button-outer {
      width: 42%;
      height: 66%;
      margin: 17% auto 0;
      padding-bottom: 17%;
      overflow: hidden;
      position: relative;
      z-index: 1;
      -webkit-border-radius: 35px;
      border-radius: 35px;
    }
    .switch-button-outer:before {
      content: "";
      background: -webkit-linear-gradient(#afb3b5 0%, #d5d8d9 100%);
      background: linear-gradient(#afb3b5 0%, #d5d8d9 100%);
      width: 100%;
      top: 0;
      left: 0;
      position: absolute;
      bottom: 21%;
      z-index: 1;
      -webkit-border-radius: 30px;
      border-radius: 30px;
      -webkit-box-shadow: 0 0 3px rgba(255,255,255,0.4);
      box-shadow: 0 0 3px rgba(255,255,255,0.4);
    }
    .switch-button {
      height: 90%;
      width: 86%;
      background: -webkit-linear-gradient(#f3f3f3, #fff);
      background: linear-gradient(#f3f3f3, #fff);
      -webkit-border-radius: 30px;
      border-radius: 30px;
      overflow: auto;
      position: relative;
      top: 5%;
      left: 7%;
      cursor: pointer;
      -webkit-box-shadow: 0 16px 8px -8px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
      box-shadow: 0 16px 8px -8px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
      z-index: 2;
    }
    .switch-button-inner {
      width: 98%;
      height: 87%;
      margin: 0 1%;
      background: -webkit-linear-gradient(#9d9d9d, #dedede, #f0f0f0);
      background: linear-gradient(#9d9d9d, #dedede, #f0f0f0);
      position: absolute;
      bottom: 0;
      -webkit-border-radius: 25px;
      border-radius: 25px;
      position: absolute;
      z-index: 3;
    }
    .switch-button-inner:before {
      content: "";
      height: 16px;
      width: 4px;
      margin-left: -2px;
      background-color: rgba(0,0,0,0.1);
      border-bottom: 2px solid rgba(255,255,255,0.5);
      position: absolute;
      top: 10px;
      left: 50%;
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
      box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
    }
    .switch-button-inner:after {
      content: "";
      width: 20px;
      height: 20px;
      border: 2px solid rgba(0,0,0,0.08);
      margin-left: -12px;
      position: absolute;
      left: 50%;
      bottom: 10px;
      -webkit-border-radius: 50%;
      border-radius: 50%;
      -webkit-box-shadow: 0 2px 0 rgba(255,255,255,0.7);
      box-shadow: 0 2px 0 rgba(255,255,255,0.7);
    }
    .switch:hover .switch-button {
      background-image: -webkit-linear-gradient(#fcfcfc, #fff);
      background-image: linear-gradient(#fcfcfc, #fff);
      -webkit-box-shadow: 0 14px 8px -7px rgba(0,0,0,0.33) inset, 0 -6px 8px -4px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
      box-shadow: 0 14px 8px -7px rgba(0,0,0,0.33) inset, 0 -6px 8px -4px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
    }
    .switch:hover .switch-button-inner {
      bottom: 3px;
      background: -webkit-linear-gradient(#bababa, #dedede 40%, #e4e4e4);
      background: linear-gradient(#bababa, #dedede 40%, #e4e4e4);
      -webkit-box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6);
      box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6);
    }
    .switch:hover .switch-button-inner:before {
      top: 9.5px;
    }
    .switch:hover .switch-button-inner:after {
      height: 19px;
    }
    .switch.checked .switch-button-outer:after {
      content: "";
      height: 50%;
      width: 80%;
      background: transparent;
      position: absolute;
      top: 6%;
      left: 10%;
      z-index: 1;
      -webkit-border-radius: 20px;
      border-radius: 20px;
      -webkit-box-shadow: 0 60px 25px rgba(0,0,0,0.35);
      box-shadow: 0 60px 25px rgba(0,0,0,0.35);
    }
    .switch.checked .switch-button {
      background-image: -webkit-linear-gradient(#fff, #f3f3f3);
      background-image: linear-gradient(#fff, #f3f3f3);
      -webkit-box-shadow: 0 -3px 8px rgba(255,255,255,0.5) inset, 0 -15px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
      box-shadow: 0 -3px 8px rgba(255,255,255,0.5) inset, 0 -15px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
    }
    .switch.checked .switch-button:before {
        content: "";
        width: 100%;
        height: 20px;
        margin-left: -50%;
        background-image: -webkit-radial-gradient(ellipse at bottom center, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%);
        background-image: radial-gradient(ellipse at bottom center, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%);
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
    }
    .switch.checked .switch-button-inner {
        background: -webkit-linear-gradient(#ddd, #dedede, #fff);
        background: linear-gradient(#ddd, #dedede, #fff);
        bottom: auto;
        top: 2px;
    }
    .switch.checked .switch-button-inner:before {
        height: 18px;
    }
    .switch.checked .switch-button-inner:after {
        height: 16px;
    }
    .switch.checked:hover .switch-button {
        background-image: -webkit-linear-gradient(#f3f3f3, #fff);
        background-image: linear-gradient(#f3f3f3, #fff);
        -webkit-box-shadow: 0 1px 8px rgba(255,255,255,0.5) inset, 0 -13px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
        box-shadow: 0 1px 8px rgba(255,255,255,0.5) inset, 0 -13px 0px rgba(0,0,0,0.33) inset, 0 0 3px rgba(0,0,0,0.85);
    }
    .switch.checked:hover .switch-button:before {
        background-image: -webkit-radial-gradient(ellipse at bottom center, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%);
        background-image: radial-gradient(ellipse at bottom center, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%);
    }
    .switch.checked:hover .switch-button-inner {
        background: -webkit-linear-gradient(#d2d2d2, #dedede, #fff);
        background: linear-gradient(#d2d2d2, #dedede, #fff);
        bottom: auto;
        top: 5px;
        -webkit-box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6);
        box-shadow: inset 0 -4px 3px rgba(255,255,255,0.6);
    }
    .switch.checked:hover .switch-button-inner:before {
        top: 9.5px;
    }
    .switch.checked:hover .switch-button-inner:after {
        height: 19px;
        bottom: 9px;
    }
    .screws {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .screw {
        display: block;
        width: 16px;
        height: 16px;
        background-color: rgba(0,0,0,0.6);
        background-image: -webkit-radial-gradient(circle at top center, #fcfcfc, transparent);
        background-image: radial-gradient(circle at top center, #fcfcfc, transparent);
        border: 1px solid #999;
        color: rgba(0,0,0,0.85);
        font-family: 'Open Sans';
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        line-height: 20px;
        position: absolute;
        left: 25px;
        top: 20px;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-shadow: 0 2px 1px rgba(255,255,255,0.5);
        box-shadow: 0 2px 1px rgba(255,255,255,0.5);
    }
    .screw:before {
        content: "";
        width: 100%;
        height: 60%;
        background-image: -webkit-radial-gradient(center bottom, rgba(255,255,255,0.5) 50%, transparent);
        background-image: radial-gradient(center bottom, rgba(255,255,255,0.5) 50%, transparent);
        position: absolute;
        bottom: 0;
        left: 0;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }
    .screw:nth-child(2) {
        left: auto;
        right: 25px;
    }
    .screw:nth-child(3),
    .screw:nth-child(4) {
        top: auto;
        bottom: 25px;
    }
    .screw:nth-child(4) {
        right: 25px;
        left: auto;
    }
    </style>
</head>
<body>
<div  class="canvas">
     <!-- Checked -->
    <div class="switch">
        <div class="screws">
          <span class="screw">*</span>
          <span class="screw">*</span>
          <span class="screw">*</span>
          <span class="screw">*</span>
        </div>
        <div class='switch-button-outer'>
            <div class="switch-button">
                <div class="switch-button-inner"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function Switch(node) {
        this.switchRoot = node;
        this.switchRoot.onclick = this.switchClickEventHanlder;
    }

    Switch.prototype.switchClickEventHanlder = function (e) {
      e.target = e.target || e.srcElement;
      if(e.target.className.indexOf("switch-button") < 0) return;
      if(!this.classList.contains("checked")) {
        this.classList.add("checked");
      } else{
        this.classList.remove("checked");
      }
      this.checked = !this.checked;
    };

    var switches = document.querySelectorAll(".switch");

    if(typeof switches !== "undefined" && switches.length) {
      for(var i = switches.length - 1; i >=0; --i){
        new Switch(switches[i]);
      }
    }
</script>
</body>
</html>
z
给个赞 46 人点赞
收藏 51 人收藏
评论 已有 23 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
muou2125
muou21252017-01-04 16:09:2023F
旁边加个灯泡效果会不会更好一点?
举报 支持 (0) 回复 (0)
azesink
azesink2016-12-27 19:43:1122F
Good emoticon
举报 支持 (0) 回复 (0)
与码共舞
与码共舞2016-12-27 15:46:3221F
太逼真了,牛逼
举报 支持 (0) 回复 (0)
大叔学前端
大叔学前端2016-12-24 16:00:0420F
厉害了我的哥
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-12-23 17:13:1119F
厉害了word姐emoticon //@Queen_5200:厉害啦word哥
举报 支持 (0) 回复 (0)
Queen_5200
Queen_52002016-12-23 16:50:1718F
厉害啦word哥
举报 支持 (0) 回复 (1)
452215551
4522155512016-12-23 16:23:5717F
确实很逼真
举报 支持 (0) 回复 (0)
dyyzht
dyyzht2016-12-22 13:26:2516F
好逼真啊,好逼真emoticon
举报 支持 (0) 回复 (0)
sanshui
sanshui2016-12-22 11:13:0815F
emoticon //@认真你就输了丶:应该可以 ,但我估计电脑也就坏了emoticon //@sanshui:螺丝钉可以扭下来吗?emoticon
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-12-22 11:09:2014F
应该可以 ,但我估计电脑也就坏了emoticon //@sanshui:螺丝钉可以扭下来吗?emoticon
举报 支持 (0) 回复 (1)
认真你就输了丶
认真你就输了丶2016-12-22 11:08:3213F
emoticon //@brucelyy:看的我在屏幕上按了几下emoticon
举报 支持 (0) 回复 (0)
sanshui
sanshui2016-12-22 11:05:4412F
螺丝钉可以扭下来吗?emoticon
举报 支持 (0) 回复 (1)
brucelyy
brucelyy2016-12-22 10:38:2911F
看的我在屏幕上按了几下emoticon
举报 支持 (0) 回复 (1)
单先生
单先生2016-12-22 09:44:1710F
emoticon //@认真你就输了丶:都是一些css样式emoticon 就没写 //@单先生:最好是能把实现过程写下来。这样参考起来也很轻松
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-12-22 09:20:399F
emoticon //@老姚:螺丝钉也很逼真emoticon
举报 支持 (0) 回复 (0)
认真你就输了丶 认真你就输了丶 作者

涸辙遗鲋,旦暮成枯;人而无志,与彼何殊.

作者最新