钉子动画特效

原创已于 2025-06-27 15:27:32 修改 · 408 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-30 14:59:35 首次发布

<!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;
height: 100vh;
background-color: #f0f0f0;
overflow: hidden;
font-family: Arial, sans-serif;
}

.container {
position: relative;
width: 300px;
height: 400px;
perspective: 1000px;
}

.nail {
position: absolute;
width: 30px;
height: 100px;
background: linear-gradient(to bottom, #8B4513, #A0522D);
border-radius: 5px;
top: 50px;
left: 135px;
transform-origin: center bottom;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
animation: swing 2s infinite alternate ease-in-out;
}

.nail-head {
position: absolute;
width: 50px;
height: 20px;
background: linear-gradient(to bottom, #696969, #808080);
border-radius: 10px;
top: -10px;
left: -10px;
}

.shadow {
position: absolute;
width: 60px;
height: 20px;
background: rgba(0,0,0,0.2);
border-radius: 50%;
bottom: 30px;
left: 120px;
filter: blur(5px);
animation: shadow 2s infinite alternate ease-in-out;
}

.info {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
color: #666;
font-size: 12px;
}

@keyframes swing {
0% {
transform: rotateZ(-15deg);
}
100% {
transform: rotateZ(15deg);
}
}

@keyframes shadow {
0% {
transform: scale(0.8) translateX(-10px);
opacity: 0.6;
}
100% {
transform: scale(1) translateX(10px);
opacity: 0.8;
}
}
</style>
</head>
<body>
<div class="container">
<div class="nail">
<div class="nail-head"></div>
</div>
<div class="shadow"></div>
<div class="info">
</div>
</div>

<script>
// 添加鼠标交互效果
document.addEventListener('mousemove', function(e) {
const nail = document.querySelector('.nail');
const shadow = document.querySelector('.shadow');

// 计算鼠标位置与钉子中心的相对位置
const containerRect = document.querySelector('.container').getBoundingClientRect();
const centerX = containerRect.left + containerRect.width / 2;
const centerY = containerRect.top + containerRect.height / 2;

// 根据鼠标位置调整钉子倾斜角度
const angle = (e.clientX - centerX) / 20;
nail.style.transform = `rotateZ(${angle}deg)`;

// 调整阴影
const shadowScale = 1 - Math.abs(angle) / 100;
const shadowOffset = angle * 0.8;
shadow.style.transform = `scale(${shadowScale}) translateX(${shadowOffset}px)`;
});
</script>
</body>
</html>