一行代码教你撩妹手到擒来❤html+css+js烟花告白3D相册(含音乐+可自定义文字)520表白/七夕情人节/求婚

最新推荐文章于 2025-05-21 13:41:29 发布

原创最新推荐文章于 2025-05-21 13:41:29 发布 · 置顶 · 7.3k 阅读

60 ·

CC 4.0 BY-SA版权

文章标签：

#3D旋转相册 #3D旋转立方体 #css旋转立方体 #HTML七夕情人节 #520情人节告白源码

520情人节同时被 3 个专栏收录

35 篇文章

订阅专栏

程序员告白

26 篇文章

订阅专栏

3D相册

18 篇文章

订阅专栏

本文教你如何用HTML、CSS和JavaScript打造一款满屏3D烟花相册，包含定制文字和音乐，适用于情人节、生日表白，轻松打动她的心。教程包括文字修改、3D效果、图片裁剪、音乐替换及部署教程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字)

一年一度的520情人节/七夕情人节/女朋友生日/程序员表白/送礼物/3D相册,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！

❉ 文章目录

❤ 我是如何获取学姐芳心~html+css+js实现满屏烟花3D相册(含音乐+自定义文字)
❉ 前言
❉ 更多告白演示
- 1. 单相片演示(已兼容H5手机和PC电脑)
- 2. 多相片演示(已兼容H5手机和PC电脑)
❉ 代码文件目录
一、文字修改(代码实现)
二、3D相册(代码实现)
三、3D相册裁剪(教程)
- 1.相片裁剪(教程)
- 2.美图秀秀(电脑版)裁剪图片
四、歌曲mp3更换教程(教程)
五、做好的网页效果,如何通过发链接给别人看?
- 1.1 解决部署上线~> 部署上线工具(可永久免费使用)
- - 1.1部署流程
  - 1.2 哇~ 部署成功
六、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
七、❉ 源码获取
八、❉更多表白源码

❉ 前言

520/七夕情人节表白[满屏烟花3D相册],程序员也可以很浪漫哦 ! 程序员向妹子表白专用代码!❤
HTML+css3+js 抖音很火的3d旋转相册-包含音乐,(送女友,表白,生日)动态生成效果,这样制作的~,现在,越来越多的人喜欢用视频记录生活,照片多的友友也会选择制作动态相册视频,不仅创意十足,同时还能展现自我风采, 撩妹神器哦!

❉ 更多告白演示

2.樱花雨3D相册演示地址
3.文字开场白+浪漫樱花飘落演示地址

1. 单相片演示(已兼容H5手机和PC电脑)

在这里插入图片描述

2. 多相片演示(已兼容H5手机和PC电脑)

在这里插入图片描述

❉ 代码文件目录

在这里插入图片描述

一、文字修改(代码实现)

示例：找到index.html文件中的script标签下 words字段,只需要修改文字就行~
在这里插入图片描述

二、3D相册(代码实现)

html (字幕部分)

    <!-- 打字 -->
    <div class="typing">
      <!-- 字幕 -->
      <h2 class="header-sub-title" id="word"></h2>
      <h2 class="header-sub-title blink">|</h2>
    </div>

html (3D相册)

    <!-- 相册 S -->
    <div class="box">
      <ul class="minbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ol class="maxbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <!-- 相册 E -->

html (文字打印)

    <!-- 打字 -->
    <div class="typing">
      <!-- 字幕 -->
      <h2 class="header-sub-title" id="word"></h2>
      <h2 class="header-sub-title blink">|</h2>
    </div>

html (播放器)

    <!-- 播放器 -->
    <div id="app">
      <div class="container_player">
        <div class="music-box">
          <!-- 音乐图片 -->
          <img src="img/01.png" />
          <div class="mask">
            <div class="mplayer" onclick="play()">
              <i class="fa">
                <span class="before"></span>
                <span class="after"> </span>
              </i>
              <svg
                class="loadingSvg"
                width="25"
                height="25"
                viewBox="0,0,50,50"
                style="
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                "
              >
                <circle></circle>
              </svg>
            </div>
            <div class="m-circle m-progress">
              <svg width="163" height="163" viewBox="0,0,163,163">
                <circle
                  cx="81"
                  cy="81"
                  r="159"
                  stroke-width="8"
                  stroke="rgba(255, 206, 113, 0.2)"
                  fill="rgba(0,0,0,.2)"
                ></circle>
                <circle
                  class="a"
                  cx="81"
                  cy="81"
                  r="159"
                  stroke-width="6"
                  stroke="rgba(255, 206, 113, 1)"
                  fill="none"
                  stroke-dasharray="0 999"
                  transform="matrix(0,-1,1,0,0,163)"
                ></circle>
              </svg>
            </div>
            <div class="m_time">
              <span class="mplayer_curtime">00:00</span>
              <span class="m-join">/</span>
              <span class="mplayer_durtime">00:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 音乐 -->
    <audio id="myAudio" src="music/yinyue.mp3"></audio>

js(文字打印)

/* 只需要修改这里的文字就行 */
    <script>
      // 打印字
      const words = [
        "❤2021.5.20与你相爱 1314天~",
        "❉你的微笑，是我这辈子见过最美的景色。",
        "❉我想收藏这样的风景一辈子。",
        "❉我的人生放荡不羁，不曾为谁停留，",
        "❉但自从遇到你，我会用余生来守护你。",
        "❉我不想做你人生的插曲，",
        "❉我想成为你一生的主题曲。",
        "❤我爱你❤。",
      ];

      let i = 0;
      let timer;
      // 速度
      let deleteDelay = 3000;
      let typeSpeed = 100;
      let delSpeed = 50;
      /* 开始编写文字 */
      function typingEffect() {
        let word = words[i].split("");
        var loopTyping = function () {
          if (word.length > 0) {
            document.getElementById("word").innerHTML += word.shift();
          } else {
            delay(function () {
              deletingEffect(); // do stuff
            }, deleteDelay); // end delay
            // deletingEffect();
            return false;
          }
          timer = setTimeout(loopTyping, typeSpeed);
        };
        loopTyping();
      }
      /* 开始编写文字 */
      typingEffect();
    </script>

js (烟花效果实现)

 var audio = document.getElementById("myAudio");
var currentTime = $(".mplayer_curtime");
var durationTime = $(".mplayer_durtime");
var circle = $(".m-circle .a")[0];
var circumference = 2 * Math.PI * 160;
var timer_audio;

function play() {
  if (audio.paused) {
    audio.play();
    $(".music-box").addClass("mplaying");
    timer_audio = setInterval(() => {
      if (audio.ended) {
        $(".music-box").removeClass("mplaying");
        currentTime.text("00:00");
        circle.setAttribute("stroke-dasharray", "0 999");
      } else {
        currentTime.text(formatTime(audio.currentTime));
        durationTime.text(formatTime(audio.duration));
        var step = circumference / audio.duration;
        var timeDisplay = Math.floor(audio.currentTime);
        circle.setAttribute(
          "stroke-dasharray",
          "" + timeDisplay * step + " " + circumference
        );
      }
    }, 100);
  } else {
    audio.pause();
    $(".music-box").removeClass("mplaying");
  }
}