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

最新推荐文章于 2023-08-15 00:05:04 发布

@码出未来-web网页设计

最新推荐文章于 2023-08-15 00:05:04 发布

阅读量1.5k

点赞数

分类专栏： 3D相册程序员告白 520情人节文章标签： 3D旋转相册 CSS立方体七夕情人节 520情人节告白程序员告白源码

本文链接：https://blog.csdn.net/ruan365392777/article/details/117992154

版权

520情人节同时被 3 个专栏收录

35 篇文章 12 订阅

订阅专栏

程序员告白

26 篇文章 8 订阅

订阅专栏

3D相册

18 篇文章 4 订阅

订阅专栏

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

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

❉ 前言

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

@码出未来-web网页设计

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css+js绘制冬季下雪3D相册(520情人节/七夕情人节/程序员表白html代码)

❉ 程序员正确表白方式~html+css+js绘制冬季下雪3D相册(520程序员表白代码大公开)一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码html+css+javascript 如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！❉ 文章目录 ❉ 程序员正确表白方式~html+css+js绘制冬季下雪3D相册(520程序员表白代码大公开)❉ 前言❉ 3D相册演示(
复制链接

扫一扫