jquery+css实现逼真物理按键开关闭合点击效果代码

代码语言:html

所属分类:其他

代码描述:jquery+css实现逼真物理按键开关闭合点击效果代码

代码标签: jquery css 逼真 物理 按键 开关 闭合 点击

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        @-webkit-keyframes switch-overlay {
            0% {
                opacity: .5;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                opacity: 0;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @keyframes switch-overlay {
            0% {
                opacity: .5;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                opacity: 0;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @-webkit-keyframes switch-overlay-reverse {
            0% {
                opacity: 0;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        
            100% {
                opacity: .5;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        @keyframes switch-overlay-reverse {
            0% {
                opacity: 0;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        
            100% {
                opacity: .5;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        @-webkit-keyframes switch {
            100% {
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        @keyframes switch {
            100% {
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        @-webkit-keyframes switch-reverse {
            0% {
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @keyframes switch-reverse {
            0% {
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @-webkit-keyframes switch-light {
            100% {
                top: -65px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        @keyframes switch-light {
            100% {
                top: -65px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        @-webkit-keyframes switch-light-reverse {
            0% {
                top: -65px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                top: -45px;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @keyframes switch-light-reverse {
            0% {
                top: -65px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                top: -45px;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @-webkit-keyframes switch-bottom {
            100% {
                -moz-border-radius: 50% 15% 50% 50%;
                -webkit-border-radius: 50%;
                border-radius: 50% 15% 50% 50%;
                -moz-box-shadow: -5px 2px 10px -3px #111;
                -webkit-box-shadow: -5px 2px 10px -3px #111;
                box-shadow: -5px 2px 10px -3px #111
            }
        }
        
        @keyframes switch-bottom {
            100% {
                -moz-border-radius: 50% 15% 50% 50%;
                -webkit-border-radius: 50%;
                border-radius: 50% 15% 50% 50%;
                -moz-box-shadow: -5px 2px 10px -3px #111;
                -webkit-box-shadow: -5px 2px 10px -3px #111;
                box-shadow: -5px 2px 10px -3px #111
            }
        }
        
        @-webkit-keyframes switch-bottom-reverse {
            0% {
                -moz-border-radius: 50% 15% 50% 50%;
                -webkit-border-radius: 50%;
                border-radius: 50% 15% 50% 50%;
                -moz-box-shadow: -5px 2px 10px -3px #111;
                -webkit-box-shadow: -5px 2px 10px -3px #111;
                box-shadow: -5px 2px 10px -3px #111
            }
        
            100% {
                -moz-border-radius: 15% 50% 50%;
                -webkit-border-radius: 15%;
                border-radius: 15% 50% 50%;
                -moz-box-shadow: -15px 5px 20px -8px #111;
                -webkit-box-shadow: -15px 5px 20px -8px #111;
                box-shadow: -15px 5px 20px -8px #111
            }
        }
        
        @keyframes switch-bottom-reverse {
            0% {
                -moz-border-radius: 50% 15% 50% 50%;
                -webkit-border-radius: 50%;
                border-radius: 50% 15% 50% 50%;
                -moz-box-shadow: -5px 2px 10px -3px #111;
                -webkit-box-shadow: -5px 2px 10px -3px #111;
                box-shadow: -5px 2px 10px -3px #111
            }
        
            100% {
                -moz-border-radius: 15% 50% 50%;
                -webkit-border-radius: 15%;
                border-radius: 15% 50% 50%;
                -moz-box-shadow: -15px 5px 20px -8px #111;
                -webkit-box-shadow: -15px 5px 20px -8px #111;
                box-shadow: -15px 5px 20px -8px #111
            }
        }
        
        @-webkit-keyframes switch-light-off {
            0% {
                top: 57px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                top: 35px;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @keyframes switch-light-off {
            0% {
                top: 57px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        
            100% {
                top: 35px;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        }
        
        @-webkit-keyframes switch-light-off-reverse {
            0% {
                top: 35px;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        
            100% {
                top: 57px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        @keyframes switch-light-off-reverse {
            0% {
                top: 35px;
                -moz-transform: rotateX(55deg) rotateY(18deg);
                -ms-transform: rotateX(55deg) rotateY(18deg);
                -webkit-transform: rotateX(55deg) rotateY(18deg);
                transform: rotateX(55deg) rotateY(18deg)
            }
        
            100% {
                top: 57px;
                -moz-transform: rotateX(55deg) rotateY(-18deg);
                -ms-transform: rotateX(55deg) rotateY(-18deg);
                -webkit-transform: rotateX(55deg) rotateY(-18deg);
                transform: rotateX(55deg) rotateY(-18deg)
            }
        }
        
        * {
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none
        }
        
        body {
            background-color: #555;
            height: 100%;
            left: 0;
            margin: 0;
            position: relative;
            top: 0;
            width: 100%
        }
        
        ..........完整代码请登录后点击上方下载按钮下载查看

网友评论0