炫酷3D相册❤ 520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)

最新推荐文章于 2025-07-04 09:09:24 发布

置顶

@码出未来-web网页设计

最新推荐文章于 2025-07-04 09:09:24 发布

阅读量7.1k

点赞数 20

CC 4.0 BY-SA版权

分类专栏： 520情人节表白网页七夕情人节 3D相册文章标签：七夕情人节表白源码HTML 七夕情人节表白网页制作HTML 520情人节表白网页设计 3D旋转相册 HTML情人节表白网页

本文链接：https://blog.csdn.net/ruan365392777/article/details/119453925

师妹直呼"这也太哇塞了吧" ❤520七夕情人节表白网页制作❤(HTML+CSS+JavaScript)

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？快来制作高端大气上档次的表白网页吧

七夕节是一个十分浪漫的节日，相传牛郎织女每年农历七月七日会在鹊桥上相会，所以七夕是中国自古流传至今的情人节，在这一天如果你有喜欢的对象，不妨鼓起勇气表白哟。

作品介绍

1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!

2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用）

3.网页作品技术方面：使用CSS制作了炫酷星星闪动亮点、鼠标可拖拽图片滑动效果、同时使用JavaScript自动切换背景图片多渐变颜色效果 (可自定义更换)、HTML添加了背景音乐(可自定义更换),。

一、作品演示

1.PC端电脑端(演示)

>>>点击进入>>>100款❤表白源码演示地址

在这里插入图片描述

1.❤照片球

在这里插入图片描述

2.❤螺旋照片

在这里插入图片描述

3.❤照片墙

在这里插入图片描述

4.❤满屏相片

在这里插入图片描述

5.❤整齐排列

在这里插入图片描述

2.H5手机端(演示)

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现 (教程)

1.这个单页面源码，是一位程序员精心为女朋友而制作的，有需要的朋友就可以修改下源码就可以送给心爱的她一个不一样的虚拟礼物了。

2.整个布局很不错，手机端和电脑端显示都很好，我也很喜欢，添加了背景音乐 / 虚幻背景 / 自动轮播相册 /，背景音乐也可以弄成你想说的话，或者自己唱的歌。这样也是很不错的。

html相册星空

音乐替换:如需更换mp3背景音乐,可自行下载后并找到mp3 文件夹更换即可~ 戳我>>>免费下载MP3
注意: 下载后的音乐文件需要修改名称和mp3文件夹里的mp3文件的名字保持一致即可

     <div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;">
          <div id="background" class="wall"></div>
          <div id="midground" class="wall"></div>
          <div id="foreground" class="wall"></div>
          <div id="top" class="wall"></div>
    </div>
      <!-- 背景E -->
      <!-- 音乐 -->
    <img
      id="music_ico"
      onclick="clickMusic()"
      src="static/image/music_ico.png"
      alt=""
    />
    <audio
      id="audio"
      style="display: none"
      src="mp3/bg_music.mp3"
      preload="auto"
      loop="loop"
    ></audio>

3D相册(制作)

制作教程: 准备好17张相片(可以自定义 10-199张)
相册替换: 找到 img 文件夹替换相片即可
注意: 相片后缀为.jpg
在这里插入图片描述
生成多张相片找到 js文件下的 functions.js 文件找到46行:199是需要生成相片的数量 , Math.round(Math.random() * 17 是随机17张

//  生成虚拟数据-修改后新生成虚拟数据- 自动查找static/image 中的图片 遍历添加进去 
for (var i = 0; i < 199; i++) {
   
   
    personArray.push({
   
   
        image: './static/image/' + Math.round(Math.random() * 17) + '.jpg'
    });
}