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

news2024/10/26 19:24:25

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

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

1. 效果

在这里插入图片描述

2. HTML结构

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

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代码：

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