<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D几何模型动画特效</title>
<style>
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 主体样式 */
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: #fff;
font-family: 'Microsoft YaHei', sans-serif;
overflow: hidden;
perspective: 1000px;
}
/* 标题样式 */
.title {
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
text-shadow: 0 0 10px rgba(0, 150, 255, 0.5);
}
/* 3D场景容器 */
.scene {
position: relative;
width: 300px;
height: 300px;
margin: 2rem auto;
transform-style: preserve-3d;
animation: rotateScene 20s infinite linear;
}
/* 几何体公共样式 */
.shape {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.5s;
}
/* 立方体样式 */
.cube {
transform: rotateX(15deg) rotateY(15deg);
}
/* 立方体面 */
.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid rgba(0, 150, 255, 0.8);
background: rgba(0, 150, 255, 0.2);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: white;
backface-visibility: visible;
box-shadow: inset 0 0 30px rgba(0, 150, 255, 0.3),
0 0 20px rgba(0, 150, 255, 0.4);
}
/* 立方体前面 */
.front {
transform: translateZ(100px);
}
/* 立方体背面 */
.back {
transform: rotateY(180deg) translateZ(100px);
}
/* 立方体右面 */
.right {
transform: rotateY(90deg) translateZ(100px);
}
/* 立方体左面 */
.left {
transform: rotateY(-90deg) translateZ(100px);
}
/* 立方体顶面 */
.top {
transform: rotateX(90deg) translateZ(100px);
}
/* 立方体底面 */
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
/* 金字塔样式 */
.pyramid {
width: 200px;
height: 200px;
transform: rotateX(15deg) rotateY(15deg);
}
/* 金字塔底面 */
.pyramid-base {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 100, 100, 0.2);
border: 2px solid rgba(255, 100, 100, 0.8);
transform: rotateX(90deg) translateZ(-100px);
box-shadow: inset 0 0 30px rgba(255, 100, 100, 0.3),
0 0 20px rgba(255, 100, 100, 0.4);
}
/* 金字塔侧面 */
.pyramid-side {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid rgba(255, 100, 100, 0.2);
transform-origin: 50% 0%;
backface-visibility: visible;
border-bottom-color: rgba(255, 100, 100, 0.2);
box-shadow: 0 0 10px rgba(255, 100, 100, 0.4);
}
/* 金字塔侧面1 */
.side1 {
transform: rotateX(30deg) rotateY(0deg);
border-bottom-color: rgba(255, 120, 120, 0.3);
}
/* 金字塔侧面2 */
.side2 {
transform: rotateX(30deg) rotateY(90deg);
border-bottom-color: rgba(255, 80, 80, 0.3);
}
/* 金字塔侧面3 */
.side3 {
transform: rotateX(30deg) rotateY(180deg);
border-bottom-color: rgba(255, 120, 120, 0.3);
}
/* 金字塔侧面4 */
.side4 {
transform: rotateX(30deg) rotateY(270deg);
border-bottom-color: rgba(255, 80, 80, 0.3);
}
/* 球体样式 */
.sphere {
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%,
rgba(100, 255, 100, 0.8),
rgba(50, 200, 50, 0.2));
box-shadow: inset 0 0 50px rgba(100, 255, 100, 0.5),
0 0 50px rgba(100, 255, 100, 0.4);
transform: rotateX(15deg) rotateY(15deg);
animation: pulseSphere 4s infinite alternate;
}
/* 控制按钮容器 */
.controls {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
/* 控制按钮样式 */
.control-btn {
padding: 0.8rem 1.5rem;
background: rgba(0, 150, 255, 0.2);
color: white;
border: 1px solid rgba(0, 150, 255, 0.8);
border-radius: 5px;
cursor: pointer;
transition: all 0.3s;
font-size: 1rem;
}
.control-btn:hover {
background: rgba(0, 150, 255, 0.4);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 150, 255, 0.3);
}
/* 网站链接样式 */
.website-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
text-decoration: none;
z-index: 100;
}
/* 场景旋转动画 */
@keyframes rotateScene {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
/* 球体脉动动画 */
@keyframes pulseSphere {
0% {
transform: scale(1) rotateX(15deg) rotateY(15deg);
box-shadow: inset 0 0 50px rgba(100, 255, 100, 0.5),
0 0 50px rgba(100, 255, 100, 0.4);
}
100% {
transform: scale(1.1) rotateX(15deg) rotateY(15deg);
box-shadow: inset 0 0 70px rgba(100, 255, 100, 0.7),
0 0 70px rgba(100, 255, 100, 0.6);
}
}
/* 金字塔浮动动画 */
@keyframes floatPyramid {
0%, 100% {
transform: translateY(0) rotateX(15deg) rotateY(15deg);
}
50% {
transform: translateY(-20px) rotateX(15deg) rotateY(15deg);
}
}
/* 立方体脉动动画 */
@keyframes pulseCube {
0%, 100% {
transform: scale(1) rotateX(15deg) rotateY(15deg);
}
50% {
transform: scale(1.05) rotateX(15deg) rotateY(15deg);
}
}
</style>
</head>
<body>
<h1 class="title">3D几何模型动画特效</h1>
<!-- 3D场景容器 -->
<div class="scene">
<!-- 立方体 -->
<div class="shape cube" id="cube">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
<!-- 金字塔 -->
<div class="shape pyramid" id="pyramid" style="display: none;">
<div class="pyramid-base"></div>
<div class="pyramid-side side1"></div>
<div class="pyramid-side side2"></div>
<div class="pyramid-side side3"></div>
<div class="pyramid-side side4"></div>
</div>
<!-- 球体 -->
<div class="shape sphere" id="sphere" style="display: none;"></div>
</div>
<!-- 控制按钮 -->
<div class="controls">
<button class="control-btn" onclick="showShape('cube')">立方体</button>
<button class="control-btn" onclick="showShape('pyramid')">金字塔</button>
<button class="control-btn" onclick="showShape('sphere')">球体</button>
</div>
<script>
// 显示选中的3D形状
function showShape(shapeId) {
// 隐藏所有形状
document.getElementById('cube').style.display = 'none';
document.getElementById('pyramid').style.display = 'none';
document.getElementById('sphere').style.display = 'none';
// 显示选中的形状
document.getElementById(shapeId).style.display = 'block';
// 根据形状应用不同动画
switch(shapeId) {
case 'cube':
document.getElementById('cube').style.animation = 'pulseCube 3s infinite ease-in-out';
document.getElementById('pyramid').style.animation = '';
document.getElementById('sphere').style.animation = '';
break;
case 'pyramid':
document.getElementById('pyramid').style.animation = 'floatPyramid 4s infinite ease-in-out';
document.getElementById('cube').style.animation = '';
document.getElementById('sphere').style.animation = '';
break;
case 'sphere':
document.getElementById('sphere').style.animation = 'pulseSphere 4s infinite alternate';
document.getElementById('cube').style.animation = '';
document.getElementById('pyramid').style.animation = '';
break;
}
}
// 页面加载后默认显示立方体
window.onload = function() {
showShape('cube');
};
// 鼠标移动时旋转立方体（交互效果）
document.addEventListener('mousemove', function(e) {
const cube = document.getElementById('cube');
const pyramid = document.getElementById('pyramid');
const sphere = document.getElementById('sphere');
// 计算鼠标位置对应的旋转角度
const xAxis = (window.innerWidth / 2 - e.pageX) / 50;
const yAxis = (window.innerHeight / 2 - e.pageY) / 50;
// 应用旋转
cube.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
pyramid.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
sphere.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
