【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 ...
随机推荐
- linux统计nginx日志中请求访问量命令
Nginx 三种分配策略:轮询.权重.ip_hash(比如你登录了一个网站,登录信息已经保存到 a 机器,但当你做后续操作时的请求会到 b 机器,那么就获取不到你原来登录的信息,此时你就需要重新登录了 ...
- 大数据学习（04）——MapReduce原理
前两篇文章介绍了HDFS的原理和高可用,下面再来介绍Hadoop的另外一个模块MapReduce.它的思想是很多技术的鼻祖,值得一学. MapReduce是什么 MapReduce是一个分布式计算系统 ...
- 2021陕西省大学生网络安全技能大赛 Web ez_checkin
web ez_checkin 进去看了一会,啥也没找到,直接上dirsearch 扫到一个index.php~,打开看一看,是php审计 <?php error_reporting(0); in ...
- Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可 ...
- WPF上传图片到服务器文件夹
1.前端用ListBox加载显示多张图片 1 <ListBox Name="lbHeadImages" Grid.Row="1" ScrollViewer ...
- 如何高效、快速学习Flutter？如何避坑？（文末送服福利）
稳住,今天是周末,不过我今天要上班....啊..啊... 对于 Flutter 我没有太多的发言权,不过GSY是对 Flutter 充分理解并精深掌握的前辈了,所以转一篇他对 Flutter 的一些解 ...
- OOP面向对象程序设计原则
OOP面向对象程序设计原则 开闭原则(Open Close Principle) 对扩展开放,对修改关闭 里氏代换原则(Liskov Substitution Principle) 继承必须确保超累所 ...
- system V信号量和Posix信号量
一.函数上的区别 信号量有两种实现:传统的System V信号量和新的POSIX信号量.它们所提供的函数很容易被区分:对于所有System V信号量函数,在它们的名字里面没有下划线.例如,应该是sem ...
- 能够进行多段文本匹配的NFA改良算法
下面的代码基于NFA算法实现了在多段字符串中匹配正则表达式,对比NFA算法可以看到它将pc由局部变量提升为类成员,以保存中间匹配状态,另外在匹配成功后将pc恢复到null状态.实际使用中,此类还应该增 ...
- 【笔记】模型泛化与岭回归与LASSO
模型泛化与岭回归与LASSO 模型正则化 模型正则化,简单来说就是限制参数大小 模型正则化是用什么思路来解决先前过拟合的由于过于拟合导致的曲线抖动(线性方程前的系数都很大) 线性回归的目标就是求一个最 ...