jquery+css实现checkbox、radio开关美化效果代码
代码语言:html
所属分类:表单美化
代码描述:jquery+css实现checkbox、radio开关美化效果代码
代码标签: jquery css checkbox radio 开关 美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Roboto:700" rel="stylesheet"> <style> html, body { height: 100%; } body { background: #ff9e21; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: "Roboto", sans-serif; } .radio { background: #1e1e1e; border-radius: 50px; padding: 10px 15px; color: #626262; font-weight: bold; display: flex; justify-content: space-between; align-items: center; height: 45px; width: 245px; font-size: 21px; position: relative; transition: all 0.5s ease-in-out; margin-bottom: 20px; } .radio.off { background: #fff; } .radio.off .bar { background: #ccc; left: 136px; } .radio.off label[for=on] { color: #626262; } .radio.off label[for=off] { color: #000; } .radio .wrap { width: 100%; display: flex; justify-content: space-between; align-items: center; border-radius: 50px; overflow: hidden; position: relative; height: 40px; } .radio input { opacity: 0; pointer-events: none; } .radio label { position: relative; z-index: 1; cursor: pointer; transition: all 0.5s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .radio label[for=on] { margin-left: 10px; color: #000; } .radio label[for=off] { margin-right: 10px; } .radio #on { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .radio #off { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .radio .bar { position: absolute; left: -90px; top: 50%; transform: translateY(-50%); background: #fff; height: 40px; width: 200px; border-radius: 50px; transition: all 0.5s ease-in-out; } .checkbox { background: #1e1e1e; border-radius: 100px; padding: 10px 15px; color: #626262; font-weight: bold; display: flex; justify-content: space-between; align-items: center; height: 45px; width: 245px; font-size: 21px; position: relative; transition: all 0.5s ease-in-out; overflow: hidden; background-clip: content-box; margin-bottom: 20px; } .checkbox input { opacity: 0; pointer-events: none; } .checkbox label { position: absolute; top: 0; left: 0; height: 100%; width: 100%; cursor: pointer; z-index: 3; } .checkbox .on { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1e1e1e; text-align: right; color: #fff; transform: translateX(0); border-radius: 100px; z-index: 2; } .checkbox .on span { position: absolute; left: 25px; top: 50%; transform: translateX(0) translateY(-50%); transition: all 500ms ease-in-out; transition-delay: 200ms; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .checkbox .off { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; text-align: right; color: #000; transform: translateX(-100%); border-radius: 100px; z-index: 1; background-clip: content-box; } .checkbox .off span { position: absolute; right: 25px; top: 50%; transform: translateX(0) translateY(-50%); transition: all 500ms ease-in-out; transition-delay: 200ms; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .switcher { padding: 10px 15px; color: #626262; font-weight: bold; display: flex; justify-content: space-between; align-items: center; height: 35px; width: 80px; font-size: 21px; position: relative; transition: all 0.5s ease-in-out; overflow: hidden; border-radius: 100px; cursor: pointer; } .switcher input { opacity: 0; pointer-events: none; } .switcher .left { position: absolute; top: 20px; left: 22px; width: 16px; height: 16px; transform-origin: 50%; border-radius: 50%; background: #fff; z-index: 2; pointer-events: none; } .switcher .right { content: ""; position: absolute; top: 20px; transform: scale(12); right: 20px; width: 16px; height: 16px; border-radius: 50%; transform-origin: 50%; z-index: 1; background: #1e1e1e; pointer-events: none; } .switcher label { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 100px; z-index: 10; cursor: pointer; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="radio"> <div class="wrap"> <input type="radio" id="on" name="radio"> <label for="on">ON</label> <input type="radio" id="off" name="radio"> <label for="off">OFF</label> <div class="bar"></div> </div> </div> <div class="checkbox"> <input type="checkbox" id="checkbox" checked name="checkbox"> <label for="checkbox"></label> <div class="on"><span>ON</span></div> <div class="off"><span>OFF</span></div> </div> <div class="switcher"> <input type="checkbox" id="switcher" name="switcher"> <label for="switcher"></label> <span class="left"></span> <span class="right"></span> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascr.........完整代码请登录后点击上方下载按钮下载查看
网友评论0