使用HTML和CSS实现3D波浪动画效果

在本篇博客中，将详细介绍如何使用HTML与CSS创建一个3D波浪动画效果。这个效果不仅能够在网页中创建立体感强的视觉体验，还能够通过悬停和聚焦实现与用户的交互。我们将逐步解析代码中的每个部分，帮助你掌握其中的关键技巧。

1. 效果

在这里插入图片描述

2. HTML结构

首先，我们来看一下HTML的基础结构。这个页面的主要布局是由一个容器wrapper包裹着多个item元素，item中的每一个都代表了可以进行3D波浪动画效果的图像。

HTML代码:

html"><!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3DwaveAnimation</title><link rel="stylesheet" href="index.css">
</head><body><div class="wrapper"><div class="items"><!-- tabindex 设置定义了键盘导航顺序，并可通过鼠标点击获取焦点，方便用户交互。--><div class="item" tabindex="0" style="css">background-image: url(../../JS/v2-3fcdfeacc10696e3f71d66a9ba6e9cc4_r.jpg)"></div><!-- 可以复制多个 item 以形成波浪效果 --></div></div>
</body></html>

代码解析：

<div class="wrapper">：这是最外层的容器，包裹住所有的item元素，并在CSS中居中对齐页面。
<div class="item">：每个item元素通过背景图片展示具体的内容，它们将在3D空间中排列，形成波浪效果。

tabindex属性被应用于每个item，使这些元素在用户通过键盘导航时可以聚焦。不同的tabindex值允许我们控制焦点的顺序，这在实现交互时非常重要。

3. CSS样式

接下来，我们通过CSS来实现3D动画效果，主要依赖于transform、perspective、filter等CSS3属性。

CSS代码：

css">* {margin: 0;padding: 0;box-sizing: border-box;
}/* 定义常用的CSS变量 */
:root {--index: calc(1vw + 1vh);--transition: cubic-bezier(.1, .7, 0, 1);
}body {background-color: #141414;
}.wrapper {display: flex;align-items: center;justify-content: center;height: 100vh;
}.items {display: flex;gap: 0.4rem;perspective: calc(var(--index) * 35);
}.item {width: calc(var(--index) * 3);height: calc(var(--index) * 12);background-size: cover;background-position: center;cursor: pointer;filter: grayscale(1) brightness(.7);transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition);will-change: transform, filter, rotateY, width;
}.item::before,
.item::after {content: '';position: absolute;height: 100%;width: 20px;right: calc(var(--index) * -1);
}.item::after {left: calc(var(--index) * -1);
}/* 当鼠标悬浮在 'item'元素上时 */
.items .item:hover {filter: inherit;transform: translateZ(calc(var(--index) * 10));
}/* 选择悬浮元素后面的兄弟元素并设置3D效果 */
.items .item:hover+.item {filter: inherit;transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg);z-index: -1;
}.items .item:hover+*+* {filter: inherit;transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg);z-index: -2;
}.items .item:hover+*+*+* {filter: inherit;transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg);z-index: -3;
}.items .item:hover+*+*+*+* {filter: inherit;transform: translateZ(calc(var(--index) * .6)) rotateY(15deg);z-index: -4;
}/* 使用 :has 伪类选中前面的兄弟元素 */
.items .item:has(+*:hover) {filter: inherit;transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg);
}.items .item:has(+ .item +*:hover) {filter: inherit;transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg);
}.items .item:has(+ * + * + :hover) {filter: inherit;transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg);
}.items .item:has(+ * + * + * + :hover) {filter: inherit;transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg);
}/* 鼠标点击和获得焦点时的效果 */
.items .item:active,
.items .item:focus {width: 28vw;filter: inherit;z-index: 100;transform: translateZ(calc(var(--index) * 10));margin: 0 .45vw;
}

样式解析：

全局与布局样式：
- *：清除了默认的margin和padding，并通过box-sizing控制元素的盒模型。
- body：设置背景颜色为深色（#141414）来突出3D效果。
- wrapper和items：使用flexbox布局将所有的item元素居中，并通过perspective来提供3D透视效果，模拟物体的远近变化。
变量定义：
- :root：定义了两个CSS变量--index和--transition，用于计算尺寸和过渡动画的时间函数。这些变量使代码更具灵活性，易于调整动画效果。
3D动画与效果：
- item：每个item通过background-size和background-position确保背景图片适应框架大小，并通过grayscale和brightness滤镜使图片默认呈现灰度效果。
- will-change：提前告知浏览器即将变化的属性，优化性能，使3D效果更流畅。
- hover效果：当鼠标悬浮在某个item上时，该item将向屏幕外部移动（translateZ），并恢复原色，其他兄弟元素则根据其位置调整3D旋转角度和深度（rotateY和translateZ）。
交互样式：
- :has伪类：CSS的has伪类用来选取满足某些条件的兄弟元素，控制前面几个兄弟元素的变化，形成连锁反应，使整体看起来如波浪般连动。
- :active与:focus：用于处理元素被点击或获得焦点时的样式，确保键盘导航和鼠标点击时的交互效果一致。