Loading...
墨滴

码出未来

2021/08/12  阅读:76  主题:默认主题

❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册

❤520给她准备的情人节礼物~html+css+javascript漫天飞雪3D相册(含音乐/可自定义文字) ~程序员表白必备

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

告白前, 我们的留言区开放给你!快来秀出你的别样表白方式,和你心仪的那个ta表白吧!


@


前言

对于程序员来说,“单身”依然是人生最大的 bug,关键是还无法调试。虽然俗话说“自古英雄多寂寞”,但是缺少另一半的人生总是不完整的。况且,距离一年一度的情(虐)人(狗)节不远了。


漫天飞雪3D相册/含背景音乐/可自定义文字 具有背景颜色渐变

漫天飞雪3D相册-在线演示地址

1. PC(电脑端)演示

在这里插入图片描述
在这里插入图片描述

2. H5(手机端)演示

在这里插入图片描述
在这里插入图片描述

代码文件目录

在这里插入图片描述
在这里插入图片描述

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

html (3D相册部分)

   <!-- 白雪花飘落 -->
    <div class="drop"></div>
    <!-- 打字 -->
    <div class="typing">
      <!-- 字幕 -->
      <h2 class="header-sub-title" id="word"></h2>
      <h2 class="header-sub-title blink">|</h2>
    </div>
    <!-- 星空 -->
    <div class="landscape"></div>
    <div class="filter"></div>
    <canvas id="canvas"></canvas>
    <!-- 自动播放 -->
    <!-- 相册 -->
    <div id="jsi-snow-container" class="container"></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>

js (满天星部分)

文字打印(找到index.html下) 文字修改即可 在这里插入图片描述

     <script>
      var d = "<div class='maple'>❄<div>";
      setInterval(function ({
        var f = $(document).width();
        var e = Math.random() * f - 300// 雪花的定位left值
        var o = 0.2 + Math.random(); // 雪花的透明度
        var fon = 25 + Math.random() * 10// 雪花大小
        var l = e - 100 + 200 * Math.random(); // 雪花的横向位移
        var k = 8000 + 5000 * Math.random();
        var deg = Math.random() * 360// 雪花的方向
        $(d)
          .clone()
          .appendTo(".maplebg")
          .css({
            left: e + "px",
            opacity: o,
            transform"rotate(" + deg + "deg)",
            "font-size": fon,
          })
          .animate(
            {
              top"550px",
              left: l + "px",
              opacity0.1,
            },
            k,
            "linear",
            function ({
              $(this).remove();
            }
          );
      }, 500);
    </script>

css (3D相册部分)

.box {
  width200px;
  height200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size100% 100%;
  position: absolute;
  margin-left42%;
  margin-top22%;
  -webkit-transform-style: preserve-3d;
  -webkit-transformrotateX(13deg);
  -webkit-animation: move 5s linear infinite;
}
.minbox li:nth-child(1) {
  backgroundurl(../img/01.png) no-repeat 0 0;
  -webkit-transformtranslateZ(50px);
}
.minbox li:nth-child(2) {
  backgroundurl(../img/02.png) no-repeat 0 0;
  -webkit-transformrotateX(180degtranslateZ(50px);
}
.minbox li:nth-child(3) {
  backgroundurl(../img/03.png) no-repeat 0 0;
  -webkit-transformrotateX(-90degtranslateZ(50px);
}
.minbox li:nth-child(4) {
  backgroundurl(../img/04.png) no-repeat 0 0;
  -webkit-transformrotateX(90degtranslateZ(50px);
}
.minbox li:nth-child(5) {
  backgroundurl(../img/05.png) no-repeat 0 0;
  -webkit-transformrotateY(-90degtranslateZ(50px);
}
.minbox li:nth-child(6) {
  backgroundurl(../img/06.png) no-repeat 0 0;
  -webkit-transformrotateY(90degtranslateZ(50px);
}
.maxbox li:nth-child(1) {
  backgroundurl(../img/1.png) no-repeat 0 0;
  -webkit-transformtranslateZ(50px);
}
.maxbox li:nth-child(2) {
  backgroundurl(../img/2.png) no-repeat 0 0;
  -webkit-transformtranslateZ(50px);
}
.maxbox li:nth-child(3) {
  backgroundurl(../img/3.png) no-repeat 0 0;
  -webkit-transformrotateX(-90degtranslateZ(50px);
}
.maxbox li:nth-child(4) {
  backgroundurl(../img/4.png) no-repeat 0 0;
  -webkit-transformrotateX(90degtranslateZ(50px);
}
.maxbox li:nth-child(5) {
  backgroundurl(../img/5.png) no-repeat 0 0;
  -webkit-transformrotateY(-90degtranslateZ(50px);
}
.maxbox li:nth-child(6) {
  backgroundurl(../img/6.png) no-repeat 0 0;
  -webkit-transformrotateY(90degtranslateZ(50px);
}
.maxbox {
  width800px;
  height400px;
  position: absolute;
  left0;
  top: -20px;
  -webkit-transform-style: preserve-3d;
}
.maxbox li {
  width200px;
  height200px;
  background#fff;
  border1px solid #ccc;
  position: absolute;
  left0;
  top0;
  opacity0.2;
  -webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {
  -webkit-transformtranslateZ(100px);
}
.maxbox li:nth-child(2) {
  -webkit-transformrotateX(180degtranslateZ(100px);
}
.maxbox li:nth-child(3) {
  -webkit-transformrotateX(-90degtranslateZ(100px);
}
.maxbox li:nth-child(4) {
  -webkit-transformrotateX(90degtranslateZ(100px);
}
.maxbox li:nth-child(5) {
  -webkit-transformrotateY(-90degtranslateZ(100px);
}
.maxbox li:nth-child(6) {
  -webkit-transformrotateY(90degtranslateZ(100px);
}

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

码出未来

2021/08/12  阅读:76  主题:默认主题

作者介绍

码出未来