【CSS】拼图验证练习
抄自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】拼图验证练习的更多相关文章
- 鸿蒙第三方组件——SwipeCaptcha滑动拼图验证组件
目录:1.组件效果展示2.Sample解析3.<鸿蒙第三方组件>系列文章合集 前言 基于安卓平台的滑动拼图验证组件SwipeCaptcha( https://github.com/mcxt ...
- 乱序拼图验证的识别并还原-puzzle-captcha
一.前言 乱序拼图验证是一种较少见的验证码防御,市面上更多的是拖动滑块,被完美攻克的有不少,都在行为轨迹上下足了功夫,本文不讨论轨迹模拟范畴,就只针对拼图还原进行研究. 找一个市面比较普及的顶像乱序拼 ...
- C# 滑动验证码|拼图验证|SlideCaptcha
使用背景: 关于滑动验证码的使用场所还是非常多的,如: 调取短信接口之前,和 注册请求之前 或者 频繁会调用的接口 都需要加这个拼图验证.这里先上一下效果图吧(心中无码,自然高清). 话不多说,开撸! ...
- 极验3.0滑动拼图验证的使用--java
[ 前言: 在登录其他网站的时候,看到有个滑动拼图的验证觉得挺好玩的,以前做一个图片验证的小demo,现在发现很多网站都开始流行滑动拼图的验证了,今天也想自己动手来弄一个. 废话不多说,开始撸起来! ...
- jquery validate的漂亮css样式验证
自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证 希望大家喜欢 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- XX宝面试题——css部分
1.<b></b>与<strong></strong>有什么不同? 1) <b>标签是一个实体标签,它所包围的字符将被设为bold(粗体), ...
- 联系电话正则表达式(jquery表单验证)
一.实现的效果图: 二.CSS样式 /*验证样式*/ .onError{ vertical-align: middle; color: #ff0000; line-height: 22px; padd ...
- 19.3.5日,报关于表单验证和ui-router
今天完成的事情: (1)学习angularJS表单验证 可以验证的内容<input type="text" minlength="2" maxlength ...
随机推荐
- OSPF多区域
目录 一.OSPF的多区域 1.1 生成OSPF多区域的原因 1.2 路由器的类型 1.3 区域的类型 二.链路状态数据库 2.1 链路状态数据库的组成 2.2链路状态通告 三.OSPF多区域配置 四 ...
- Python 机器学习实战 —— 无监督学习(下)
前言 在上篇< Python 机器学习实战 -- 无监督学习(上)>介绍了数据集变换中最常见的 PCA 主成分分析.NMF 非负矩阵分解等无监督模型,举例说明使用使用非监督模型对多维度特征 ...
- Docker部署ELK之部署elasticsearch7.6.0(1)
1. 拉取elasticsearch7.6.0镜像: sudo docker pull elasticsearch:7.6.0 2. 输入命令,构建容器: sudo docker run --name ...
- 快速从SQL语法过度到Elasticsearch的DSL语法
目录 前言 bool-相当于一个括号 should-相当于or must-相当于and must_not-相当于 ! and term-相当于= terms-相当于in between-相当于rang ...
- ☕【Java技术指南】「并发原理专题」AQS的技术体系之CLH、MCS锁的原理及实现
背景 SMP(Symmetric Multi-Processor) 对称多处理器结构,它是相对非对称多处理技术而言的.应用十分广泛的并行技术. 在这种架构中,一台计算机由多个CPU组成,并共享内存和其 ...
- Pikachu-CSRF模块
一.概述 Cross-site request forgery 简称为"CSRF",在CSRF的攻击场景中攻击者会伪造一个请求(这个请求一般是一个链接),然后欺骗目标用户进行点击, ...
- 009 FPGA实现网口通信的几种方式【转载】
从硬件上来说,一般PHY芯片为模数混合电路,负责接收电.光这类模拟信号,经过解调和A/D转换后通过MII接口将信号交给MAC芯片进行处理.一般MAC芯片为纯数字电路. 物理层定义了数据传送与接收所需要 ...
- 如何快速方便的生成好看的接口文档(apipost生成文档)
一键生成文档 我们在"2分钟玩转APIPOST"一讲中,简单介绍了如何生成并分享接口文档: 点击分享文档 复制并打开文档地址就可以看到了完整的接口文档. 本节课主要是讲解一些需要注 ...
- [TcaplusDB知识库]数据库支撑底盘引擎计算层介绍
在上次的TcaplusDB知识库中,TcaplusDB君为大家讲解了TcaplusDB所用的基于HASH表的Key-value存储引擎TXHDB.存储引擎作为数据库的支撑底盘,其重要性无可置疑,而在本 ...
- Linux从头学08:Linux 是如何保护内核代码的?【从实模式到保护模式】
作 者:道哥,10+年的嵌入式开发老兵. 公众号:[IOT物联网小镇],专注于:C/C++.Linux操作系统.应用程序设计.物联网.单片机和嵌入式开发等领域. 公众号回复[书籍],获取 Linux. ...