<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style> body{ background: rgb(163, 255, 224); } .container{ width: 170px; height: 170px; position: relative; margin: 100px auto; } .rainbow{ width: 170px; height: 170px; position: absolute; top: 70px; left: 80px; margin-left: -40px; border-radius: 170px 0 0 0; box-shadow: #fb323c -2px -2px 0 1px, #f99716 -14px -14px 0 13px, #fee124 -16px -16px 0 15px, #afde2e -18px -18px 0 17px, #6ad7f8 -20px -20px 0 19px, #60b1f5 -22px -22px 0 21px, #a3459b -24px -24px 0 23px; animation: rainbow 5s ease-in-out infinite; transform: rotate(40deg); } @keyframes rainbow{ 50%{ transform: rotate(50deg); } } .rainbow::after{ content: ''; width: 120px; height: 15px; position: absolute; bottom: -23px; left: 127px; background: #000; border-radius: 50%; opacity: 0.2; animation: rainbow_shadow 5s ease-in-out infinite; transform: rotate(-40deg); transform-origin: 50% 50%; } @keyframes rainbow_shadow{ 50%{ transform: rotate(-50deg) translate(10px) scale(0.7); opacity: 0.05; } } </style> </head> <body> <div class="container"> <div class="rainbow"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <style> body{ margin-top: 300px; } *{ margin:0; padding: 0; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .outer{ position: relative; margin:20px auto; width: 200px; height: 30px; line-height: 28px; border:1px solid #ccc; background: #ccc9c9; } .outer span,.filter-box,.inner{ position: absolute; top: 0; left: 0; } .outer span{ display: block; padding:0 0 0 36px; width: 100%; height: 100%; color: #fff; text-align: center; } .filter-box{ width: 0; height: 100%; background: #46fff2; z-index: 9; } .outer.act span{ padding:0 36px 0 0; } .inner{ width: 36px; height: 28px; text-align: center; background: #fff; cursor: pointer; font-family: "宋体"; z-index: 10; font-weight: bold; color: #929292; } .outer.act .inner{ color: green; } .outer.act span{ z-index: 99; } </style> <script type="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ $(".inner").mousedown(function(e){ var el = $(".inner"),os = el.offset(),dx,$span=$(".outer>span"),$filter=$(".filter-box"); $(document).mousemove(function(e){ dx = e.pageX - os.left; if(dx<0){ dx=0; }else if(dx>162){ dx=162 } $filter.css('width',dx); el.css("left",dx); }); $(document).mouseup(function(e){ $(document).off('mousemove'); dx = e.pageX - os.left; if(dx<162){ dx=0; $span.html("滑动解锁"); }else if(dx>=162){ dx=162; $(".outer").addClass("act"); $span.html("验证通过!"); el.html('√') } $filter.css('width',dx); el.css("left",dx) }) }) }) </script> </head> <body> <div class="outer"> <div class="filter-box"></div> <span> 滑动解锁 </span> <div class="inner">>></div> </div> </body> </html>