3D柱状图动画特效

原创已于 2025-06-27 10:56:47 修改 · 314 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-21 14:23:56 首次发布

<!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-color: #f0f2f5;
font-family: 'Microsoft YaHei', sans-serif;
perspective: 1000px; /* 3D透视效果 */
}

/* 图表标题 */
.chart-title {
font-size: 28px;
color: #333;
margin-bottom: 40px;
text-align: center;
}

/* 图表容器 */
.chart-container {
display: flex;
justify-content: center;
align-items: flex-end;
height: 400px;
gap: 40px;
padding: 20px;
transform-style: preserve-3d; /* 保持3D变换 */
}

/* 单个柱状图 */
.bar {
position: relative;
width: 60px;
height: 300px;
transform-style: preserve-3d;
animation: rise 1.5s ease-out forwards;
transform-origin: bottom;
}

/* 柱状图前面 */
.bar-front {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #4facfe, #00f2fe);
transform: translateZ(15px);
border-radius: 5px 5px 0 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 柱状图背面 */
.bar-back {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #3a7bd5, #00d2ff);
transform: translateZ(-15px);
border-radius: 5px 5px 0 0;
}

/* 柱状图右侧面 */
.bar-right {
position: absolute;
width: 30px;
height: 100%;
background: linear-gradient(to top, #2a6fc9, #00c6fb);
right: -15px;
transform: rotateY(90deg);
transform-origin: right;
border-radius: 0 5px 0 0;
}

/* 柱状图顶部 */
.bar-top {
position: absolute;
width: 100%;
height: 30px;
background: #4facfe;
top: -15px;
transform: rotateX(90deg);
transform-origin: top;
border-radius: 5px 5px 0 0;
}

/* 柱状图标签 */
.bar-label {
position: absolute;
bottom: -40px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
color: #666;
font-weight: bold;
}

/* 柱状图数值 */
.bar-value {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
font-size: 18px;
color: #333;
font-weight: bold;
opacity: 0;
animation: fadeIn 0.5s ease-out 1.5s forwards;
}

/* 图表图例 */
.chart-legend {
display: flex;
justify-content: center;
margin-top: 40px;
gap: 20px;
}

/* 单个图例 */
.legend-item {
display: flex;
align-items: center;
font-size: 14px;
color: #666;
}

/* 图例颜色块 */
.legend-color {
width: 20px;
height: 20px;
margin-right: 8px;
border-radius: 3px;
}

/* 柱状图升起动画 */
@keyframes rise {
0% {
transform: scaleY(0);
}
80% {
transform: scaleY(1.1);
}
100% {
transform: scaleY(1);
}
}

/* 数值淡入动画 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}

/* 网站链接样式 */
.website-link {
position: fixed;
bottom: 20px;
right: 20px;
color: #666;
font-size: 14px;
text-decoration: none;
z-index: 100;
}

/* 为不同柱子设置不同高度和颜色 */
.bar:nth-child(1) {
height: 200px;
animation-delay: 0.1s;
}
.bar:nth-child(1) .bar-front,
.bar:nth-child(1) .bar-back {
background: linear-gradient(to top, #ff9a9e, #fad0c4);
}
.bar:nth-child(1) .bar-right {
background: linear-gradient(to top, #f78ca0, #f5b7b1);
}
.bar:nth-child(1) .bar-top {
background: #ff9a9e;
}
.bar:nth-child(1) .legend-color {
background: #ff9a9e;
}

.bar:nth-child(2) {
height: 280px;
animation-delay: 0.3s;
}

.bar:nth-child(3) {
height: 180px;
animation-delay: 0.5s;
}
.bar:nth-child(3) .bar-front,
.bar:nth-child(3) .bar-back {
background: linear-gradient(to top, #a1c4fd, #c2e9fb);
}
.bar:nth-child(3) .bar-right {
background: linear-gradient(to top, #8bb6fa, #b6e1fa);
}
.bar:nth-child(3) .bar-top {
background: #a1c4fd;
}
.bar:nth-child(3) .legend-color {
background: #a1c4fd;
}

.bar:nth-child(4) {
height: 240px;
animation-delay: 0.7s;
}
.bar:nth-child(4) .bar-front,
.bar:nth-child(4) .bar-back {
background: linear-gradient(to top, #84fab0, #8fd3f4);
}
.bar:nth-child(4) .bar-right {
background: linear-gradient(to top, #76f7a7, #84cdf3);
}
.bar:nth-child(4) .bar-top {
background: #84fab0;
}
.bar:nth-child(4) .legend-color {
background: #84fab0;
}

.bar:nth-child(5) {
height: 150px;
animation-delay: 0.9s;
}
.bar:nth-child(5) .bar-front,
.bar:nth-child(5) .bar-back {
background: linear-gradient(to top, #ffc3a0, #ffafbd);
}
.bar:nth-child(5) .bar-right {
background: linear-gradient(to top, #ffb38a, #ff9dab);
}
.bar:nth-child(5) .bar-top {
background: #ffc3a0;
}
.bar:nth-child(5) .legend-color {
background: #ffc3a0;
}
</style>
</head>
<body>

<h1 class="chart-title">2023年销售数据统计</h1>

<div class="chart-container">

<div class="bar">
<div class="bar-front"></div>
<div class="bar-back"></div>
<div class="bar-right"></div>
<div class="bar-top"></div>
<div class="bar-label">一月</div>
<div class="bar-value">¥200万</div>
</div>

<div class="bar">
<div class="bar-front"></div>
<div class="bar-back"></div>
<div class="bar-right"></div>
<div class="bar-top"></div>
<div class="bar-label">二月</div>
<div class="bar-value">¥280万</div>
</div>

<div class="bar">
<div class="bar-front"></div>
<div class="bar-back"></div>
<div class="bar-right"></div>
<div class="bar-top"></div>
<div class="bar-label">三月</div>
<div class="bar-value">¥180万</div>
</div>

<div class="bar">
<div class="bar-front"></div>
<div class="bar-back"></div>
<div class="bar-right"></div>
<div class="bar-top"></div>
<div class="bar-label">四月</div>
<div class="bar-value">¥240万</div>
</div>

<div class="bar">
<div class="bar-front"></div>
<div class="bar-back"></div>
<div class="bar-right"></div>
<div class="bar-top"></div>
<div class="bar-label">五月</div>
<div class="bar-value">¥150万</div>
</div>
</div>

<div class="chart-legend">
<div class="legend-item">
<div class="legend-color" style="background: #4facfe;"></div>
<span>电子产品</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #ff9a9e;"></div>
<span>家居用品</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #a1c4fd;"></div>
<span>服装</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #84fab0;"></div>
<span>食品</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #ffc3a0;"></div>
<span>其他</span>
</div>
</div>

</body>
</html>