抄自B站Up主CodingStartup起码课

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div id="captcha">

        <div id="handle"><span></span></div>

    </div>

</body>

</html>

<script>

    const captcha = document.querySelector('#captcha');

    const handle = document.querySelector('#handle');

    const button = document.querySelector('#handle span');

    var moving = false;

    button.addEventListener('mousedown', e => {

        moving = true;

    });

    document.body.addEventListener('mouseup', e => {

        if (moving) {

            const finalOffset = e.clientX - handle.getBoundingClientRect().left;

            if (finalOffset >= 430 && finalOffset <= 450) {

                // pass

                captcha.classList.add('passed');

            }

            else {

                // failed

                captcha.style.setProperty('--move', '0px');

            }

            moving = false;

        }

    });

    document.body.addEventListener('mousemove', e => {

        if (moving) {

            const offsetLeft = handle.getBoundingClientRect().left;

            const buttonWidth = button.getBoundingClientRect().width;

            captcha.style.setProperty('--move', `${e.clientX - offsetLeft - buttonWidth / 2}px`);

        }

    });

    /*

        captcha.style.setProperty('--move', `${e.clientX - offsetLeft - buttonWidth / 2}px`)

    */

</script>

<style>

    html,

    body {

        margin: 0;

        padding: 0;

        width: 100%;

        min-height: 100vh;

        display: flex;

        justify-content: center;

        align-items: center;

        background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 152, 155, 1) 0.1%, rgba(0, 94, 120, 1) 94.2%);

    }

    #captcha {

        --move: 20px;

        --width: 400px;

        --height: 260px;

        --puzzle-width: 80px;

        --puzzle-height: 80px;

        display: block;

        width: var(--width);

        height: var(--height);

        border-radius: 5px;

        background-image: url(https://img2.baidu.com/it/u=2444031136,1156137205&fm=26&fmt=auto&gp=0.jpg);

        background-size: cover;

        background-position: center;

        box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);

    }

    #captcha::before,

    #captcha::after {

        position: absolute;

        content: '';

        display: block;

        width: inherit;

        height: inherit;

        background-image: inherit;

        background-size: inherit;

        background-position: inherit;

        clip-path: inset(calc((var(--height) - var(--puzzle-height)) / 2) var(--puzzle-width) calc((var(--height) - var(--puzzle-height)) / 2) calc(var(--width) - var(--puzzle-width) * 2));

    }

    #captcha::before {

        background-color: rgba(0, 0, 0, .6);

        background-blend-mode: darken;

    }

    #captcha::after {

        transform: translateX(calc(var(--width) * -1 + clamp(0px,

                        var(--move),

                        calc(var(--width) + var(--puzzle-width)))));

        transition: .2s all ease-in-out;

    }

    #handle {

        width: calc(var(--width) + var(--puzzle-width) * 2);

        height: 25px;

        border-radius: 15px;

        background-color: #eee;

        position: absolute;

        transform: translate(calc(-1 * var(--puzzle-width) * 2), calc(var(--height) + 20px));

        box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);

        border: solid 2px rgba(0, 0, 0, .2)

    }

    #handle span {

        display: block;

        width: var(--puzzle-width);

        height: inherit;

        border-radius: inherit;

        background-color: #fff;

        box-shadow: inset 0 0 5px rgba(0, 0, 0, .4),

            0 0 4px rgba(0, 0, 0, .3);

        position: absolute;

        cursor: move;

        transform: translateX(clamp(0px,

                    var(--move),

                    calc(var(--width) + var(--puzzle-width))));

        transition: .2s all ease-in-out;

    }

#captcha.passed::before,

#captcha.passed::after,

#captcha.passed #handle {

    opacity: 0;

}

#captcha:active #handle span,#captcha:active::after{

    transition:none;

}

</style>

【CSS】拼图验证练习的更多相关文章

  1. 鸿蒙第三方组件——SwipeCaptcha滑动拼图验证组件

    目录:1.组件效果展示2.Sample解析3.<鸿蒙第三方组件>系列文章合集 前言 基于安卓平台的滑动拼图验证组件SwipeCaptcha( https://github.com/mcxt ...

  2. 乱序拼图验证的识别并还原-puzzle-captcha

    一.前言 乱序拼图验证是一种较少见的验证码防御,市面上更多的是拖动滑块,被完美攻克的有不少,都在行为轨迹上下足了功夫,本文不讨论轨迹模拟范畴,就只针对拼图还原进行研究. 找一个市面比较普及的顶像乱序拼 ...

  3. C# 滑动验证码|拼图验证|SlideCaptcha

    使用背景: 关于滑动验证码的使用场所还是非常多的,如: 调取短信接口之前,和 注册请求之前 或者 频繁会调用的接口 都需要加这个拼图验证.这里先上一下效果图吧(心中无码,自然高清). 话不多说,开撸! ...

  4. 极验3.0滑动拼图验证的使用--java

    [ 前言: 在登录其他网站的时候,看到有个滑动拼图的验证觉得挺好玩的,以前做一个图片验证的小demo,现在发现很多网站都开始流行滑动拼图的验证了,今天也想自己动手来弄一个. 废话不多说,开始撸起来! ...

  5. jquery validate的漂亮css样式验证

    自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...

  6. Html与CSS快速入门01-基础概念

    Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...

  7. XX宝面试题——css部分

    1.<b></b>与<strong></strong>有什么不同? 1) <b>标签是一个实体标签,它所包围的字符将被设为bold(粗体), ...

  8. 联系电话正则表达式（jquery表单验证）

    一.实现的效果图: 二.CSS样式 /*验证样式*/ .onError{ vertical-align: middle; color: #ff0000; line-height: 22px; padd ...

  9. 19.3.5日，报关于表单验证和ui-router

    今天完成的事情: (1)学习angularJS表单验证 可以验证的内容<input type="text" minlength="2" maxlength ...

随机推荐

  1. Elasticsearch（9300、9200）未授权访问

    下载地址https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.5.0.zip 检测 http://localhost ...

  2. Docker与k8s的恩怨情仇（七）—— “服务发现”大法让你的内外交互原地起飞

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 第一章:Docker与k8s的恩怨情仇(一)-成为PaaS前浪的Cloud Foundry 第二章:Dock ...

  3. pytest框架fixture的使用

    fixture可以当做参数传入 定义fixture跟定义普通函数差不多,唯一区别就是在函数上加个装饰器@pytest.fixture(),fixture命名不要以test开头,跟用例区分开.fixtu ...

  4. fastbin attack学习小结

    fastbin attack学习小结   之前留在本地的一篇笔记,复习一下. 下面以glibc2.23为例,说明fastbin管理动态内存的细节.先看一下释放内存的管理: if ((unsigned  ...

  5. Cell Reports | 上海瑞金医院糜坚青等揭示组蛋白酰化/乙酰化修饰比率调控BRD4基因组分布

    ​ 景杰生物 | 报道 组蛋白翻译后修饰,被认为构成一类超越基因序列的"组蛋白密码",控制着遗传信息的组织层次及其在染色质层面的解读.组蛋白赖氨酸乙酰化是研究最早的一类组蛋白修饰, ...

  6. MySQL-初见

    目录 初识MySQL 数据库基本命令 创建数据库表 数据库引擎 修改和删除表字段 MySQL数据管理 DML语言 DQL查询数据 单表查询 WHERE条件子句 模糊查询:比较操作符 联表查询 排序查询 ...

  7. Cloud-init的安装和使用 --以ubuntu-server-14.04-amd64为例

    by hyc 1.Cloud-init安装 已有了一个安装好系统的镜像. 镜像名:ubuntu-test-14.04-server-amd64.img 用户名:user 密码:1 主机名:ubuntu ...

  8. 【原创】在macOS Big Sur (Silicon M1, ARM)中配置ASP运行环境

    亲测有效,转载请附原文地址. 一,安装Parallels Desktop,注意选择支持ARM的版本. 二,注册 Windows Insider Preview Downloads 账号,通过以下链接下 ...

  9. [论文阅读] LCC-NLM(局部颜色校正, 非线性mask)

    [论文阅读] LCC-NLM(局部颜色校正, 非线性mask) 文章: Local color correction using non-linear masking 1. 算法原理 如下图所示为, ...

  10. iOS开发之Video转GIF

    前言 最近遇到需要将video转化为gif的问题,网上找的在线转换限制太多,索性就自己写了一个工具APP.文章末尾有开源代码和打包好的APP,如有需要请自行下载. 效果图 核心代码 来源 class ...