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