【描述】一个OFF / ON 永远水火不容的两个单词
【走起_html】
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/demo.css"> 7 <link rel="stylesheet" href="css/style.css"> 8 </head> 9 <body> 10 <div class="toggle" id="switch"> 11 <div class="toggle-text-off">OFF</div> 12 <div class="grow-comp"></div> 13 <div class="toggle-button"></div> 14 <div class="toggle-text-on">ON</div> 15 </div> 16 <script src="js/jquery-1.7.2.min.js"></script> 17 <script src="js/script.js"></script> 18 </body> 19 </html>
【走起_style】
1 body{background-color: #141219;} 2 .toggle{position: absolute;top: 50%;left: 50%;width: 75px;height: 40px;border: 2px solid #444249;border-radius: 20px;cursor: pointer; 3 -webkit-transition: border-color .6s ease-out; 4 transition: border-color .6s ease-out; 5 } 6 .toggle-text-off{position: absolute;top: 0;bottom: 0;right: 6px;line-height:36px;font-family:'Quicksand',sans-serif;font-size: 14px;font-weight: bold;color: #444249;} 7 .grow-comp{position: absolute;opacity: 0;top: 10px;bottom: 10px;left: 10px;right: 10px;border-radius: 6px;background-color: rgba(75, 122, 141, .1);box-shadow: 0 0 12px rgba(75, 122, 141, .2); 8 -webkit-transition: opacity 4.5s 1s; 9 transition: opacity 4.5s 1s; 10 } 11 .toggle-button{position:absolute;top:3px;bottom:3px;right:38px;width:30px;height:30px;background-color:#444249;border-radius:50%; 12 -webkit-transition: all .3s .1s, width .1s, top .1s, bottom .1s; 13 transition: all .3s .1s, width .1s, top .1s, bottom .1s; 14 } 15 .toggle-text-on{position: absolute;top: 0;bottom: 0;left: 0;right: 0;line-height: 36px;text-align: center;font-family: 'Quicksand', sans-serif;font-size: 18px;font-weight: normal;cursor: pointer;color: transparent; 16 user-select: none; 17 -ms-user-select: none; 18 -webkit-user-select: none; 19 } 20 .toggle-on.toggle{border-color: rgba(137, 194, 217, .4); 21 -webkit-transition: all .5s .15s ease-out; 22 transition: all .5s .15s ease-out; 23 } 24 .toggle-on .toggle-text-off{color: rgba(0,0,0,0);} 25 .toggle-on .glow-comp{opacity: 1; 26 -webkit-transition: opacity 1s; 27 transition: opacity 1s; 28 } 29 .toggle-on .toggle-button{top: 3px;width: 65px;bottom: 3px;right: 3px;border-radius: 23px;background-color: #89c2da; 30 box-shadow: 0 0 16px #4b7a8d; 31 -webkit-transition: all .2s .1s, right .1s; 32 transition: all .2s .1s, right .1s; 33 } 34 .toggle-on .toggle-text-on{color: #3b6a7d; 35 -webkit-transition: color .3s .15s ; 36 transition: color .3s .15s ; 37 }
【走起_script】
1 $(function () { 2 $("#switch").on("click",function (e) { 3 e.preventDefault(); 4 $(this).toggleClass('toggle-on'); 5 }) 6 });
【smile】
学了这么长时间竟然才知道 s 是可以连续写的！！！
过渡效果也是可以连续拆分写多了 555
谢谢codepen
http://codepen.io/cl0udc0ntr0l/pen/xhBtF
扫一扫
2576
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
