一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript

2021-07-06 17:02:25 阅读：323 来源： 互联网

标签：告白 HTML 相册 JavaScript html 520 情人节 css 3D

❤ 一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript

七夕是中国的情人节，七夕520情人节也是一个非常适合表白的日子，可以把自己平常害怕说出来的话，在这一天说给自己喜欢的人听。明天就是2021年的七夕节了，赶紧行动起来！是不是要给女朋友或者正在追求的妹子一点小惊喜呢! 今天这篇博客就分享下前端代码如何实现漫画3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！

❉ 文章目录

❤ 一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 3D相册效果演示(已兼容PC电脑端/H5手机端)
- ❉ 1.PC(电脑端)演示
- ❉ 2.H5(手机端)演示
一、文件结构
二、3D相册告白(教程)
三、3D相册裁剪(教程)
- ❉ 1.相片裁剪(教程)
- ❉ 2.美图秀秀(电脑版)裁剪图片
四、歌曲mp3更换教程(教程)
五、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
六、源码获取
七、更多表白源码

❤ 3D相册效果演示(已兼容PC电脑端/H5手机端)

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

❉ 1.PC(电脑端)演示

❤动漫3D相册—在线演示地址
在这里插入图片描述

❉ 2.H5(手机端)演示

在这里插入图片描述

一、文件结构

在这里插入图片描述

二、3D相册告白(教程)

示例：找到index.html文件下,只需要修改文字即可
在这里插入图片描述

❉ HTML 相册

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>七夕情人节- 动漫3D相册告白</title>
        <!-- 播放器css -->
        <link rel="stylesheet" href="./css/common.css" />
        <!-- 相册css -->
        <link type="text/css" href="./css/style.css" rel="stylesheet" />
</head>
<body>
    <!-- 烟花 -->
    <canvas class="raining"></canvas>
    <!-- 打字 -->
    <div class="typing">
    <!-- 字幕 -->
    <h2 class="header-sub-title" id="word"></h2>
    <h2 class="header-sub-title blink">|</h2>
    </div>
    <!-- 相册 -->
    <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>
     <!-- 播放器 -->
    <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="./azn.mp3" loop="loop" ></audio>
    <div class="backimg"></div>
</body>
<html>

❉ JS 文字打印

   // -----------打印字-----------
     const words = [
      "❤亲爱的,今天是我们在一起的第520天",
      "❉ 月梅星稀鸣蝉哀，胡琴曲幽谁人拉",
      "❉ 今夜无人盈袖拂，时逢科举缘是由",
      "❉ 你的笑，我无法忘掉",
      "❉ 你的好，温暖我心潮",
      "❉ 你的美，如秋月皎皎",
      "❉ 我的爱，如秋水淼淼",
      "❉ 陪着你一直到老",
      "❉ 亲爱的，七夕到了",
      "❉ 陪着你度过生命中的每一个七夕",
    ];
    let i = 0;
    let timer;
    let deleteDelay = 3000;
    /* 开始编写文字 */
    function typingEffect() {
      let word = words[i].split("");
      var loopTyping = function () {
        if (word.length > 0) {
          document.getElementById("word").innerHTML += word.shift();
        } else {
          delay(function () {
            deletingEffect();
          }, deleteDelay); 
          return false;
        }
        timer = setTimeout(loopTyping, typeSpeed);
      };
    }

    function deletingEffect() {
      let word = words[i].split("");
      var loopDeleting = function () {
        if (word.length > 0) {
          word.pop();
          document.getElementById("word").innerHTML = word.join("");
        } else {
          if (words.length > i + 1) {
            i++;
          }
          else {
            i = 0;
          }
          typingEffect();
          return false;
        }

    var delay = (function () {
      var timer = 0;
      return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    })();
    /* 开始打印字 */
    typingEffect();

❉ JS 烟花泡泡 </ font >

/* 烟花 */
    var canvas = document.querySelector(".raining");
    var w, h;
    ~~ function setSize() { //定义canvas的宽高，让他跟浏览器的窗口的宽高相同
        window.onresize = arguments.callee;
        w = window.innerWidth;
        h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;
    }();
        move: function() { //重点是判断和初始位置。其他无大变化
            if (this.y > this.h) { //位置判断
                this.y += -this.vy; //从下往上				

            } else {
                if (this.r < 100) { //绽放的大小
                    this.r += this.vr;
                } else {
                    this.init(); //放完后回归变量原点
                }

            }
            this.draw(); //开始作画

        }
    }

    function createrain(num) {
        for (var i = 0; i < num; i++) {
            setTimeout(function() {
                var raing = new rain(); //创建一滴雨
                raing.init();
                raing.draw();
                arain.push(raing);
            }, 800 * i) //每隔150ms下落一滴雨
        }
    }
    createrain(10); //雨滴数量
    setInterval(function() {
        canCon.fillStyle = "rgba(0,0,0,0.1)"; //拿起一支透明0.13的笔		
        canCon.fillRect(0, 0, w, h); //添加蒙版 控制雨滴长度
        for (var item of arain) {
            //item of arain指的是数组里的每一个元素
            //item in arain指的是数组里的每一个元素的下标（包括圆形连上的可遍历元素）
            item.move(); //运行整个move事件
        }
    }, 1000 / 60); //上升时间

三、3D相册裁剪(教程)

教程如下：需要12张图片, 1-6 图片是大图 400px400px ,01-06 图片是小图 100px100px

将准备好的图片,自行替换 img 文件中的图片即可!
在这里插入图片描述

❉ 1.相片裁剪(教程)

1.1首先:下载美图秀秀/百度下载/或者软件安装
1.2或者使用在线链接裁剪—> 在线裁剪图片链接
在这里插入图片描述

❉ 2.美图秀秀(电脑版)裁剪图片

2.1选择图片裁剪
在这里插入图片描述

四、歌曲mp3更换教程(教程)

如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址

❉ 1.搜索歌曲

在这里插入图片描述

❉ 2.下载歌曲

在这里插入图片描述

❉ 3.获取歌曲

在这里插入图片描述

❉ 4.保存歌曲

关注公众号以后/复制链接到浏览器打开

在这里插入图片描述

1.5下载mp3 ~下载完毕以后自行替换mp3文件即可(如不想修改代码,必须保持名称一致)
在这里插入图片描述

五、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述

六、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉ 1.看到这里了就 [点赞+好评+收藏] 三连支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

❉ 3.以上内容技术相关问题可以相互学习，可关注↓公Z号获取更多源码 !

在这里插入图片描述

七、更多表白源码

1.❤100款 html+css+JavaScript 表白源码演示地址

2.❤520情人节送女朋友的生日礼物~html+css+js实现抖音炫酷樱花3D相册(含音乐)

3. 一行代码教你撩妹手到擒来~html+css+js烟花告白3D相册(含音乐+可自定义文字)

4. ❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐)

5. ❤520情人节陪她一起看流星雨~html+css+javascript制作流星雨3D相册(含音乐)

6. html+css+js生日快乐网站模板 (520/七夕情人节/告白/求婚/生日快乐) 含背景音乐

7. html+css+js生日快乐~程序员专属的生日快乐html模板(含生日背景音乐)

8. ❤女朋友生日❤ HTML+css3+js 实现抖音炫酷樱花3D相册 (含背景音乐)程序员表白必备

9. 我是如何用一行代码表白学妹_{❤520情人节送女朋友的3D樱花雨相册礼物❤}(程序员表白专属)

10. 七夕情人节~html+css+javascript实现满屏爱心特效(程序员表白)

11. 七夕情人节送花告白动画(HTML+CSS+JavaScript)

12. html+css+js制作结婚倒计时网页模板(520/七夕情人节/程序员告白)

13. html+css+javascript制作爱心表白代码(520/七夕情人节/告白/生日礼物)

14. 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节

15. html+css+javascript实现100款超炫酷告白源码(520/七夕/告白/求婚/脱单)程序员必备

16. html+css+javascript实现520告白爱情树(含音乐)程序员表白必备

17. html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)

18. 程序员520告白Html+Js+Css花瓣相册网页模板❤程序员表白必备

19. html+css+javascript实现乾坤八卦风水罗盘时钟 (免费附源码)

20. html+css+javascript实现抖音超火罗盘时钟 (免费附源码)

21. 抖音超火JavaScript实现网红太空人表盘 ~看程序员是如何用代码做华为太空手表

22. html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)

23. 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)

24. html+css+js制作520表白网页，全屏的爱心和表白语网页动画代码，浪漫的520爱心表白动画特效。

25. 520情人节程序员的浪漫告白~html+css+js浪漫星空❤爱心3D相册 (含音乐)

26. Html5浪漫结婚请柬婚礼网站模板❤_爱她就给她最美的H5婚礼请柬_(婚庆电子邀请函)含背景音乐

27. html+css+javascript满屏雪花爱心520表白网站 (含音乐)520告白/七夕情人节/生日礼物/程序员表白必备

28. 520七夕情人节那天我用代码给女朋友送了一个礼物~html+css+javascript实现樱花爱心相册「可以拿去送给自己喜欢的人」

29. 七夕情人节教你如何告白~html+css+js制作唯美满天星3D相册(含音乐)程序员520表白必备

30. html+css+javascript生日快乐烟花 ❤520/表白/七夕情人节/求婚❤专用(自定义文字)

31. 基于Echarts实现可视化数据大屏展示(150套)——制作深蓝色科技感物流云数据看板页面模板

标签：告白,HTML,相册,JavaScript,html,520,情人节,css,3D
来源： https://blog.csdn.net/ruan365392777/article/details/118521979

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript

❤ 一行代码教你七夕情人节如何告白—动漫3D相册(音乐+文字)HTML+CSS+JavaScript

❉ 文章目录

❤ 3D相册效果演示(已兼容PC电脑端/H5手机端)

❉ 1.PC(电脑端)演示

❉ 2.H5(手机端)演示

一、文件结构

二、3D相册告白(教程)

❉ HTML 相册

❉ JS 文字打印

❉ JS 烟花泡泡 </ font >

三、3D相册裁剪(教程)

❉ 1.相片裁剪(教程)

❉ 2.美图秀秀(电脑版)裁剪图片

四、歌曲mp3更换教程(教程)

❉ 1.搜索歌曲

❉ 2.下载歌曲

❉ 3.获取歌曲

❉ 4.保存歌曲

五、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

六、 源码获取

七、更多表白源码

六、源码获取