使用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="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：用于处理元素被点击或获得焦点时的样式，确保键盘导航和鼠标点击时的交互效果一致。

4. 关键知识点解析

3D透视与变换

perspective：定义3D场景的透视视角，使物体看起来离用户有远近关系。
transform ：通过translateZ将元素在Z轴方向上移动，形成远近效果，通过rotateY旋转元素，增加立体感。

交互伪类

:hover：控制元素在鼠标悬停时的变化。
:focus与:active：保证用户使用键盘时同样能与页面进行交互，保持可访问性。

5. 总结

通过本文的介绍，我们成功创建了一个3D波浪动画效果，利用了CSS3的transform、perspective等属性，以及交互伪类实现了炫酷的视觉效果。这个效果不仅可以丰富页面的动态效果，也可以增强用户的交互体验。

你可以根据自己的需求进行调整，例如改变动画速度、背景图片或3D视角等。如果你想让你的网页在视觉上更具吸引力，不妨试试这个3D波浪动画效果！