一、项目概述今天分享一个只用 HTML 和 CSS 就能完成的爱心造型照片墙页面整体由 9 张带相框的图片拼接成爱心轮廓鼠标放上去图片会平滑放大、浮在最上层自带复古拍立得白框阴影效果适合做纪念相册、表白页面、个人作品展示页面全程不引入 JavaScript代码简洁易懂适合网页初学者练习定位与 transform 变换知识点。二、页面核心效果功能布局结构使用固定宽高的父容器 绝对定位精准摆放 9 张图片搭配旋转角度拼凑出爱心整体造型。相框样式每张图片自带白色留白边框、细灰边线与柔和阴影模拟实体纸质照片质感。悬浮交互鼠标悬停图片会放大 1.5 倍阴影加深层级提升覆盖周边照片0.8 秒平滑过渡动画视觉流畅不生硬。页面风格浅灰色背景弱化干扰居中大标题突出主题整体简约温柔氛围感拉满。三、核心知识点讲解绝对定位 position:absolute父容器设置 position:relative 作为定位参照子图片通过 left、top 控制在容器内的坐标位置自由摆放图片实现不规则爱心排版。transform 变换rotate 控制图片旋转倾斜角度scale 实现鼠标悬浮的放大效果是页面爱心造型与交互的核心属性。z-index 层级默认所有图片层级为 1悬浮时改为 2保证放大后的图片盖住其他照片不会被遮挡。transition 过渡动画给 transform、阴影添加过渡时长让缩放变化不是瞬间完成形成顺滑动画。盒阴影 box-shadow制作照片立体悬浮效果未 hover 浅淡阴影hover 加深阴影强化层次感。四、代码分层解析1. 全局样式重置部分用通配符 * 清除浏览器自带默认内外边距避免页面出现莫名留白body 设置浅灰色背景衬托白色照片让画面更柔和。2. 标题与父容器样式h1 标题居中放大字体作为页面主标题.container 容器设置固定宽高、相对定位所有图片都在这个容器内部摆放自动居中到页面中间。3. 图片通用相框样式给所有 img 统一设置绝对定位padding 做出照片白边白色背景模拟相纸加上边框与基础阴影一次性统一所有照片相框样式不用单独重复写代码。4. 单张图片独立定位旋转9 个单独类名 pic1-pic9分别设置 left、top 坐标和 rotate 旋转角度通过不同位置、倾斜角度错落摆放组合成完整爱心轮廓每一张图片位置都经过精准调整拼接自然。5. 悬浮交互样式img:hover 设置放大 scale (1.5)、加深阴影、提升层级 z-index:2搭配 transition:all 0.8s 实现平滑动画鼠标移入、移出都会有流畅缩放效果。五、使用部署注意事项图片路径代码中图片存放于项目文件夹下 img 目录自己命名图片使用时需新建 img 文件夹放入对应 9 张图片路径错误会导致照片无法显示。适配问题本案例容器固定 1000px 宽度适合电脑端展示移动端会出现横向滚动条如需手机浏览可额外添加媒体查询做自适应改造。图片尺寸代码内图片统一设置宽高 150px替换图片时建议使用正方形素材否则相框比例会变形。免费空间上传注意图片文件夹名称、文件名全部使用小写英文Linux 服务器区分大小写大小写不一致会出现图片加载失败空白问题。六、拓展优化思路增加点击弹窗搭配简单 JS 实现点击图片放大全屏查看功能。适配移动端使用百分比、max-width 改造容器小屏幕自动缩小爱心照片墙。更换主题配色修改 body 背景色、相框阴影颜色制作暗黑、马卡龙等不同风格相册。增加照片数量新增图片类名调整坐标旋转角度扩充爱心照片数量丰富画面。添加背景音乐引入 audio 标签打开页面自动播放轻音乐提升氛围感。七、最终效果