手指打手势动画特效

原创已于 2025-06-27 11:21:39 修改 · 604 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-17 14:02:26 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手指打手势动画特效</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #f5f5f5;
font-family: Arial, sans-serif;
}

.hand {
position: relative;
width: 200px;
height: 300px;
}

/* 手掌 */
.palm {
position: absolute;
width: 160px;
height: 180px;
background: #ffdbac;
border-radius: 80px 80px 60px 60px;
bottom: 0;
left: 20px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

/* 手指基础样式 */
.finger {
position: absolute;
background: #ffdbac;
border-radius: 20px;
box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
transform-origin: bottom center;
}

/* 大拇指 */
.thumb {
width: 50px;
height: 60px;
bottom: 60px;
left: 0;
border-radius: 20px 0 20px 20px;
animation: thumb-move 3s infinite alternate;
}

/* 食指 */
.index {
width: 40px;
height: 100px;
bottom: 120px;
right: 120px;
animation: index-move 3s infinite alternate;
}

/* 中指 */
.middle {
width: 40px;
height: 120px;
bottom: 120px;
right: 80px;
animation: middle-move 3s infinite alternate;
}

/* 无名指 */
.ring {
width: 40px;
height: 110px;
bottom: 120px;
right: 40px;
animation: ring-move 3s infinite alternate;
}

/* 小指 */
.pinky {
width: 30px;
height: 90px;
bottom: 120px;
right: 10px;
animation: pinky-move 3s infinite alternate;
}

/* 手指关节 */
.finger-joint {
position: absolute;
width: 100%;
height: 20px;
background: rgba(0,0,0,0.1);
border-radius: 10px;
}

/* 大拇指动画 */
@keyframes thumb-move {
0%, 40% {
transform: rotate(-20deg);
height: 60px;
}
60%, 100% {
transform: rotate(30deg);
height: 50px;
}
}

/* 食指动画 */
@keyframes index-move {
0%, 40% {
transform: rotate(0deg);
height: 100px;
}
60%, 100% {
transform: rotate(-30deg);
height: 80px;
}
}

/* 中指动画 */
@keyframes middle-move {
0%, 40% {
transform: rotate(0deg);
height: 120px;
}
60%, 100% {
transform: rotate(-20deg);
height: 100px;
}
}

/* 无名指动画 */
@keyframes ring-move {
0%, 40% {
transform: rotate(0deg);
height: 110px;
}
60%, 100% {
transform: rotate(-10deg);
height: 90px;
}
}

/* 小指动画 */
@keyframes pinky-move {
0%, 40% {
transform: rotate(0deg);
height: 90px;
}
60%, 100% {
transform: rotate(10deg);
height: 70px;
}
}

/* 手势说明 */
.gesture-info {
position: absolute;
bottom: -60px;
left: 0;
width: 100%;
text-align: center;
font-size: 18px;
color: #666;
animation: text-pulse 3s infinite;
}

@keyframes text-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(0,0,0,0.7);
text-decoration: none;
font-size: 14px;
background: rgba(255,255,255,0.3);
padding: 8px 15px;
border-radius: 20px;
z-index: 10;
transition: all 0.3s ease;
}

.custom-link:hover {
color: black;
background: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="hand">
<div class="palm"></div>
<div class="finger thumb">
<div class="finger-joint" style="top: 30px;"></div>
</div>
<div class="finger index">
<div class="finger-joint" style="top: 40px;"></div>
<div class="finger-joint" style="top: 70px;"></div>
</div>
<div class="finger middle">
<div class="finger-joint" style="top: 50px;"></div>
<div class="finger-joint" style="top: 90px;"></div>
</div>
<div class="finger ring">
<div class="finger-joint" style="top: 45px;"></div>
<div class="finger-joint" style="top: 80px;"></div>
</div>
<div class="finger pinky">
<div class="finger-joint" style="top: 35px;"></div>
<div class="finger-joint" style="top: 60px;"></div>
</div>
<div class="gesture-info">OK手势动画</div>
</div>

</body>
</html>