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

15 篇文章 7 订阅
18 篇文章 3 订阅

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

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



前言

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


3D相册演示(含背景音乐)可自定义12张相片

1. 蓝色梦幻海洋3D相册->在线演示地址

2.(生日快乐)蛋糕烟花+蓝色梦幻海洋3D相册–>在线演示地址

1. 10款静态演示

在这里插入图片描述

2. 10款动态演示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述
请添加图片描述

代码文件目录

在这里插入图片描述

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

html (3D相册部分)

<!--
 * @Author: your name
 * @Date: 2021-04-14 13:39:56
 * @LastEditTime: 2021-04-16 10:10:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \TweenMax蓝色梦幻海洋网页特效\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>浪漫海洋梦幻告白3D相册</title>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style0.css" />
  </head>

  <body>
    <!-- 荧光S -->
    <div class="container">
      <!-- 打字 -->
      <div class="typing">
        <!-- 字幕 -->
        <h2 class="header-sub-title" id="word"></h2>
        <h2 class="header-sub-title blink">|</h2>
      </div>
      <audio controls autoplay><source src="mp3/3.mp3" /></audio>
      <!-- 相册 -->
      <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>

  </body>
</html>

js (部分)

    <script>
      /* 兼容H5 手机端 */
      // --------------------打印字 S--------------------------
      const words = [
        "❤ 囍 ❤ 茜茜~ 来之程序员的告白(可自定义文字)",
        "❤ 情书给你一封,情话给你一句,余生给你一人。",
        "❤ 幻想着和你一起,一日三餐,走过四季,你会是我一生的归宿。",
        "❤ 你就是我温暖的围巾,冰爽的啤酒,帅气的领带,日复一日的梦想。",
        "❤ 我不擅长恋爱,但我天生爱你。",
        "❤ 心里若有了良人,眼里的便全是路人。",
        "❤ 生活到底有多少令人惊喜的馈赠,竟让我在茫茫人海遇见你,遇见你。",
        "❤ 有你在的地方,天气明朗,万物可爱。",
        "❤ 酸甜苦辣与你分享,三餐四季与你共度,这才是最美的人间情话。",
        "❤ 我这一生都是坚定不移的唯物主义者,唯有你,我希望有来生。",
        "❤ 我们要走到最后,要结婚,要过日子,要相濡以沫,要携手终身。",
      ];
      let PPP = 0;
      let timer;
      // speed in ms
      /* 开始编写文字 */
      function typingEffect() {
        var loopTyping = function () {
          if (word.length > 0) {
            document.getElementById("word").innerHTML += word.shift();
          } else {
            delay(function () {
            }, deleteDelay); // end delay
            // deletingEffect();
            return false;
          }
          timer = setTimeout(loopTyping, typeSpeed);
        };
        loopTyping();
      }

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

          timer = setTimeout(loopDeleting, delSpeed);
        };

        loopDeleting();
      }

      var delay = (function () {
        var timer = 0;
        return function (callback, ms) {
          clearTimeout(timer);
          timer = setTimeout(callback, ms);
        };
      })();
      typingEffect();
    </script>
   

css (3D相册部分)

body {
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}

.particle_star {
  width: 4px;
  height: 4px;
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0px 0px 17px 4px wheat;
  border-radius: 50%;
}

.container {
  margin: 0 auto;
  height: 100vh;
  width: 100vw;
  position: absolute;
  overflow: hidden;
  /* background-size: 100% auto; */
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../bg_img/bg.jpg");
  /* background-image: url("../bg_img/bg2.jpg"); */
  /* background-image: url("../bg_img/bg3.jpg"); */
  /* background-image: url("../bg_img/bg4.jpg"); */
  /* background-image: url("../bg_img/bg6.jpg"); */
  /* background-image: url("../bg_img/bg7.jpg"); */
  /* background-image: url("../bg_img/bg8.jpg"); */
  /* background-image: url("../bg_img/bg9.jpg"); */
  /* background-image: url("../bg_img/bg10.jpg"); */
  /* background-image: url("../bg_img/bg11.jpg"); */
  background-position-x: center;
}

/*满天星播放器*/

audio {
  z-index: 5;
  position: absolute;
  bottom: 0;
  opacity: 0.1;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

audio:hover {
  opacity: 1;
}


@keyframes blink {
  to {
    opacity: 0;
  }
}

.typing {
  display: flex;
  top: 10%;
  left: 4%;
  z-index: 999999 !important;
  position: fixed !important;
}

3D相册更改背景教程

1. 切换背景图片->教程
在这里插入图片描述
2. bg_img 文件下是背景图片
在这里插入图片描述
3. images 文件下是3D相册 ~直接替换你需要的3D相册图片即可, 不需要修改代码!

在这里插入图片描述

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

教程如下:需要12张图片(可自定义12张)

1-6 图片是大图 400px*400px ,01-06 图片是小图 100px*100px

将准备好的图片,自行替换 img 文件中的图片即可!

在这里插入图片描述

1.相片裁剪(教程)

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

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

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

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

如需更换mp3背景音乐,可自行下载更换即可~ mp3免费下载地址
1.搜索需要的歌曲

在这里插入图片描述

2.下载
在这里插入图片描述

3获取歌曲id
在这里插入图片描述

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

在这里插入图片描述

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


四、做好的网页效果,如何通过发链接给别人看?

1.1 解决部署上线~> 部署上线工具(可永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件,免费下载安装,简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)

1.1部署流程

在这里插入图片描述

1.2 哇~ 部署成功

哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
在这里插入图片描述


五、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~
在这里插入图片描述


六、 源码获取

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

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

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

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

在这里插入图片描述


七、更多表白源码

❤100款表白源码演示地址

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@码出未来-web网页设计

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值