<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>搞笑卡通验证</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Comic Sans MS', cursive;
}
body {
background: #ffd6e7;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.background-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.bubble {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
animation: float-bubble 8s infinite ease-in-out;
}
@keyframes float-bubble {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.1); }
}
.main-content {
position: relative;
z-index: 1;
text-align: center;
width: 100%;
max-width: 400px;
padding: 20px;
}
.cat-container {
position: relative;
width: 200px;
height: 160px;
margin: 0 auto 20px;
}
.cat {
width: 100%;
height: 100%;
position: relative;
}
.cat-head {
width: 100px;
height: 100px;
background: #ffb6c1;
border-radius: 50%;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.cat-ear {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 40px solid #ffb6c1;
position: absolute;
top: -20px;
}
.cat-ear.left { left: 10px; transform: rotate(-30deg); }
.cat-ear.right { right: 10px; transform: rotate(30deg); }
.cat-eye {
width: 25px;
height: 25px;
background: #000;
border-radius: 50%;
position: absolute;
top: 40px;
animation: blink 4s infinite;
}
@keyframes blink {
0%, 96%, 98% { transform: scaleY(1); }
97% { transform: scaleY(0.1); }
}
.cat-eye.left { left: 20px; }
.cat-eye.right { right: 20px; }
.cat-nose {
width: 15px;
height: 10px;
background: #ff69b4;
border-radius: 50%;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
}
.cat-mouth {
width: 30px;
height: 15px;
border-bottom: 3px solid #ff69b4;
border-radius: 0 0 30px 30px;
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
}
.input-container {
margin-top: 20px;
position: relative;
}
.input-field {
width: 240px;
padding: 12px;
font-size: 18px;
border: none;
border-radius: 25px;
background: rgba(255, 255, 255, 0.8);
text-align: center;
color: #ff69b4;
letter-spacing: 3px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.2);
}
.input-field:focus {
outline: none;
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);
}
.verify-btn {
margin-top: 20px;
padding: 12px 30px;
font-size: 18px;
background: #ff69b4;
border: none;
border-radius: 25px;
color: white;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
}
.verify-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.4);
background: #ff1493;
}
.verify-btn:active {
transform: translateY(0);
}
.message {
margin-top: 15px;
color: #ff69b4;
font-size: 14px;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}
@media (max-height: 600px) {
.cat-container {
transform: scale(0.8);
margin-bottom: 10px;
}
.input-field {
padding: 10px;
font-size: 16px;
}
.verify-btn {
padding: 10px 25px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="background-bubbles" id="bubbles"></div>
<div class="main-content">
<div class="cat-container">
<div class="cat">
<div class="cat-head">
<div class="cat-ear left"></div>
<div class="cat-ear right"></div>
<div class="cat-eye left"></div>
<div class="cat-eye right"></div>
<div class="cat-nose"></div>
<div class="cat-mouth"></div>
</div>
</div>
</div>
<div class="input-container">
<input type="text" class="input-field" placeholder="请输入卡密喵~" maxlength="32" id="code">
</div>
<button onclick="Call_Verify(code.value);" class="verify-btn">验证喵！</button>
<div id="msg" class="message">请输入正确的卡密喵~ 验证成功就能玩耍啦！</div>
</div>
<script>
document.getElementById("title").innerHTML = PanGolin.GetTitle();
document.getElementById("notice").innerHTML = PanGolin.GetNotice();
document.getElementById("Query_Trial").innerHTML = PanGolin.Is_Trial() ? "试用" : "查码";
document.getElementById("Pay").style.display = PanGolin.Is_Pay() ? "block" : "none";
function Call_Verify(data) {
PanGolin.Verify(data);
}
function Call_Query_Trial(data) {
if (PanGolin.Is_Trial()) PanGolin.Trial();
else PanGolin.Query(data);
}
function Call_Pay() {
PanGolin.Pay();
}
function mStart(obj) {
obj.style.opacity = "0.8";
}
function mUp(obj) {
obj.style.opacity = "1";
}
</script>
<script>
// 创建气泡背景
const bubblesContainer = document.getElementById('bubbles');
for (let i = 0; i < 20; i++) {
const bubble = document.createElement('div');
bubble.className = 'bubble';
const size = Math.random() * 60 + 20;
bubble.style.width = size + 'px';
bubble.style.height = size + 'px';
bubble.style.left = Math.random() * 100 + '%';
bubble.style.top = Math.random() * 100 + '%';
bubble.style.animationDelay = Math.random() * 5 + 's';
bubblesContainer.appendChild(bubble);
}
// 猫咪眼睛跟随鼠标
document.addEventListener('mousemove', function(e) {
const eyes = document.querySelectorAll('.cat-eye');
eyes.forEach(eye => {
const rect = eye.getBoundingClientRect();
const x = (rect.left + rect.width / 2);
const y = (rect.top + rect.height / 2);
const rad = Math.atan2(e.pageX - x, e.pageY - y);
const rot = (rad * (180 / Math.PI) * -1) + 180;
eye.style.transform = `rotate(${rot}deg)`;
});
});
</script>
</body>
</html>
<!-- 本DIY代码来自于 https://diy.zhongzhipian.top -->