18910140161

Html

首页 >> 前端开发 >> Html

html css js冬天用雪画3D相册(520情人节/七夕情人节/程序员告白html代码)

顺晟科技

2022-09-15 20:08:37

120

❉ 程序员正确表白方式~html+css+js绘制冬季下雪3D相册(520程序员表白代码大公开)

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

❉ 文章目录

  • ❉ 程序员正确表白方式~html+css+js绘制冬季下雪3D相册(520程序员表白代码大公开)
  • ❉ 前言
  • ❉ 3D相册演示(含背景音乐)可自定义12张相片
    • 1. PC(电脑端)演示
    • 2. H5(手机端)演示
  • ❉ 代码文件目录
  • 一、3D相册(代码实现)
    • html (3D相册部分)
    • js (雪花飘落部分)
    • css (3D相册部分)
  • 二、3D相册裁剪(教程)
    • 1.相片裁剪(教程)
    • 2.美图秀秀(电脑版)裁剪图片
  • 三、歌曲mp3更换教程(教程)
  • 四、做好的网页效果,如何通过发链接给别人看?
    • 1.1 解决部署上线~> 部署上线工具(可永久免费使用)
      • 1.1部署流程
      • 1.2 哇~ 部署成功
  • 五、前端 零基础 入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
  • 六、❉ 源码获取
  • 七、❉更多表白源码

❉ 前言

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

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

在线演示地址

1. PC(电脑端)演示

在这里插入图片描述

2. H5(手机端)演示

在这里插入图片描述

❉ 代码文件目录

在这里插入图片描述

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

html (3D相册部分)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>下雪特效</title>

    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="contents">
      <canvas id="canvas">This browser cannot use a canvas.</canvas>
    </div>

    <script src="js/script.js"></script>

    <div
      style="
        text-align: center;
        margin: 50px 0;
        font: normal 14px/24px \'MicroSoft YaHei\';
      "
    ></div>
  </body>
</html>

js (雪花飘落部分)

(function () {
  \'use strict\';
  window.addEventListener(\'load\', function() {
    var canvas = document.getElementById(\'canvas\');

    if (!canvas || !canvas.getContext) {
      return false;
    }


    function drawGround() {
      ctx.beginPath();
      ctx.fillStyle = \'rgb(255, 255, 255)\';
      ctx.rect(0, Y - Y * 0.1, X, Y - Y * -0.1);
      ctx.fill();
    }


    // var
    var snowNum = 80;
    var backSnowNum = 80;
    var snows = [];
    var backSnows = [];

    if (X < 768) {
      snowNum = 25;
      backSnowNum = 25;
    }
     
    function Snow(ctx, x, y, r, g) {
      this.ctx = ctx;
      this.init(x, y, r, g);
    }

    Snow.prototype.init = function(x, y, r, g) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.c = \'255, 255, 255\';
      this.v = {
        x: 0,
        y: g
      };
    };

    Snow.prototype.updatePosition = function() {
      this.y += this.v.y;
    };
    
    Snow.prototype.wrapPosition = function() {
      if (this.x - this.r > X) {
        this.x = 0;
      }
      if (this.x + this.r < 0) {
        this.x = X;
      }
      if (this.y - this.r > Y) {
        this.y = 0;
      }
      if (this.y + this.r < 0) {
        this.y = Y;
      }
    };

    Snow.prototype.draw = function() {
      ctx = this.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = this.gradient();
      ctx.arc(this.x, this.y, this.r, Math.PI * 2, false);
      ctx.fill();
      ctx.closePath();
      ctx.restore();
    };

    Snow.prototype.gradient = function () {
      var col = this.c;
      var g = this.ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.r);
      g.addColorStop(0, "rgba(" + col + ", " + (1 * 1) + ")");
      g.addColorStop(0.5, "rgba(" + col + ", " + (1 * 0.2) + ")");
      g.addColorStop(1, "rgba(" + col + ", " + (1 * 0) + ")");
      return g;
    };

    Snow.prototype.resize = function() {
      this.x = rand(0, X);
      this.y = rand(0, Y);
    };

    Snow.prototype.render = function() {
      this.updatePosition();
      this.wrapPosition();
      this.draw();
    };

    for (var i = 0; i < backSnowNum; i++) {
      var snow = new Snow(ctx, rand(0, X), rand(0, Y), rand(1, 5), Math.random());
      backSnows.push(snow);
    }
    
    for (var i = 0; i < snowNum; i++) {
      var snow = new Snow(ctx, rand(0, X), rand(0, Y), rand(10, 15), Math.random() + 0.3);
      snows.push(snow);
    }

css (3D相册部分)

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow:hidden;
  background: #74ebd5;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/********************
  Contents
********************/

canvas#canvas {
  background: #74ebd5;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

二、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 下一篇：制作浪漫温馨的生日礼物~ HTML
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！