18910140161

Css

首页 >> 前端开发 >> Css

制作浪漫温馨的生日礼物~ HTML CSS JavaScript蓝色梦海洋3D专辑(包括音乐)

顺晟科技

2022-09-13 12:52:38

139

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

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

❉ 文章目录

  • ❉ 制作一个浪漫温馨的生日礼物送她~html+css+javascript蓝色梦幻海洋3D相册(含音乐)
  • ❉ 前言
  • ❉ 3D相册演示(含背景音乐)可自定义12张相片
    • 1. 10款静态演示
    • 2. 10款动态演示
  • ❉ 代码文件目录
  • 一、3D相册(代码实现)
    • html (3D相册部分)
    • js (部分)
    • css (3D相册部分)
  • ❉ 3D相册更改背景教程
  • 二、3D相册裁剪(教程)
    • 1.相片裁剪(教程)
    • 2.美图秀秀(电脑版)裁剪图片
  • 三、歌曲mp3更换教程(教程)
  • 四、做好的网页效果,如何通过发链接给别人看?
    • 1.1 解决部署上线~> 部署上线工具(可永久免费使用)
      • 1.1部署流程
      • 1.2 哇~ 部署成功
  • 五、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
  • 六、❉ 源码获取
  • 七、❉更多表白源码

❉ 前言

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款表白源码演示地址

上一篇：html css js冬天用雪画3D 下一篇：HTML CSS JavaScrip
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！