使用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波浪动画效果!