2021-11-17 彩虹效果加上滑动解锁

<!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('&radic;')
                    }
                    $filter.css('width',dx);
                    el.css("left",dx)
                })
            })
        })
    </script>
</head>
<body>
<div class="outer">
    <div class="filter-box"></div>
    <span>
            滑动解锁
        </span>
    <div class="inner">&gt;&gt;</div>
</div>
</body>
</html>

原文链接：https://blog.csdn.net/Magnrticda/article/details/121382687