CSS拼图验证练习
Posted wosperry
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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拼图验证练习的主要内容，如果未能解决你的问题，请参考以下文章