3D骨牌图片特效

原创已于 2025-06-27 15:16:35 修改 · 799 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-05 17:31:24 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D骨牌图片特效 - 9pk.homes</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
min-height: 100vh;
overflow-x: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
perspective: 1000px;
}

.header {
text-align: center;
margin-bottom: 50px;
z-index: 10;
}

h1 {
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(90deg, #ff9a9e, #fad0c4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.domino-container {
position: relative;
width: 100%;
height: 60vh;
display: flex;
justify-content: center;
align-items: center;
transform-style: preserve-3d;
}

.domino {
position: absolute;
width: 120px;
height: 200px;
background: linear-gradient(145deg, #fff, #f3f3f3);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
transition: transform 0.5s ease, box-shadow 0.5s ease;
cursor: pointer;
overflow: hidden;
}

.domino::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
pointer-events: none;
}

.domino .face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.domino .front {
transform: translateZ(1px);
}

.domino .back {
transform: rotateY(180deg) translateZ(1px);
background: linear-gradient(145deg, #f3f3f3, #e0e0e0);
}

.domino img {
width: 90%;
height: 90%;
object-fit: cover;
border-radius: 5px;
}

.domino .dots {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 100%;
padding: 20px;
}

.dot-row {
display: flex;
justify-content: space-around;
}

.dot {
width: 15px;
height: 15px;
background-color: #333;
border-radius: 50%;
}

.special-link {
display: inline-block;
margin-top: 50px;
padding: 15px 40px;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
color: #333;
text-decoration: none;
border-radius: 50px;
font-weight: bold;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 154, 158, 0.4);
position: relative;
overflow: hidden;
z-index: 10;
}

.special-link:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(255, 154, 158, 0.6);
}

.special-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: all 0.5s;
}

.special-link:hover::before {
left: 100%;
}

.instructions {
margin-top: 20px;
text-align: center;
opacity: 0.7;
font-size: 0.9rem;
}

@media (max-width: 768px) {
h1 {
font-size: 2rem;
}

.domino {
width: 80px;
height: 140px;
}

.special-link {
padding: 12px 30px;
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="header">
<h1>3D骨牌图片特效</h1>
</div>

<p class="instructions">点击骨牌可以翻转查看背面</p>

// 创建骨牌
for (let i = 0; i < dominoCount; i++) {
const domino = document.createElement('div');
domino.className = 'domino';

// 计算位置
const angle = (i / dominoCount) * Math.PI * 2;
const x = Math.sin(angle) * radius;
const z = Math.cos(angle) * radius;

domino.style.transform = `translateX(${x}px) translateZ(${z}px) rotateY(${angle * (180 / Math.PI)}deg)`;

// 创建正面和背面
const front = document.createElement('div');
front.className = 'face front';

const img = document.createElement('img');
img.src = images[i];
img.alt = `图片 ${i + 1}`;
front.appendChild(img);

const back = document.createElement('div');
back.className = 'face back';

// 创建骨牌点数
const dots = document.createElement('div');
dots.className = 'dots';

// 随机生成点数 (1-6)
const dotCount = Math.floor(Math.random() * 6) + 1;
const dotRows = createDots(dotCount);

dotRows.forEach(row => {
const dotRow = document.createElement('div');
dotRow.className = 'dot-row';

row.forEach(pos => {
if (pos) {
const dot = document.createElement('div');
dot.className = 'dot';
dotRow.appendChild(dot);
} else {
const space = document.createElement('div');
space.style.width = '15px';
space.style.height = '15px';
dotRow.appendChild(space);
}
});

dots.appendChild(dotRow);
});

back.appendChild(dots);
domino.appendChild(front);
domino.appendChild(back);

// 点击翻转
domino.addEventListener('click', function() {
this.style.transform = this.style.transform.replace('rotateY', 'rotateY(180deg)');
setTimeout(() => {
this.style.transform = this.style.transform.replace('rotateY(180deg)', 'rotateY(0deg)');
}, 2000);
});

container.appendChild(domino);
}

// 自动旋转
let angle = 0;
setInterval(() => {
angle += 0.002;
const dominos = document.querySelectorAll('.domino');

dominos.forEach((domino, i) => {
const dominoAngle = angle + (i / dominoCount) * Math.PI * 2;
const x = Math.sin(dominoAngle) * radius;
const z = Math.cos(dominoAngle) * radius;

domino.style.transform = `translateX(${x}px) translateZ(${z}px) rotateY(${dominoAngle * (180 / Math.PI)}deg)`;
});
}, 30);

// 创建骨牌点数布局
function createDots(count) {
const layouts = {
1: [[0,0,0], [0,1,0], [0,0,0]],
2: [[1,0,0], [0,0,0], [0,0,1]],
3: [[1,0,0], [0,1,0], [0,0,1]],
4: [[1,0,1], [0,0,0], [1,0,1]],
5: [[1,0,1], [0,1,0], [1,0,1]],
6: [[1,0,1], [1,0,1], [1,0,1]]
};

return layouts[count] || layouts[1];
}

// 鼠标移动视差效果
document.addEventListener('mousemove', function(e) {
const x = e.clientX / window.innerWidth - 0.5;
const y = e.clientY / window.innerHeight - 0.5;

container.style.transform = `rotateY(${x * 30}deg) rotateX(${-y * 30}deg)`;
});
});
</script>
</body>
</html>