❀520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript

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

❀ 520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？快来制作高端大气上档次的D立体动态相册表白网页吧!

七夕节是一个十分浪漫的节日，相传牛郎织女每年农历七月七日会在鹊桥上相会，所以七夕是中国自古流传至今的情人节，在这一天如果你有喜欢的对象，不妨鼓起勇气表白哟。

❀ 文章目录

❀ 520七夕情人节告白网页代码❀—浪漫梦幻3D相册(樱花主题)HTML+CSS+JavaScript
❀ 3D相册效果演示
- 1. PC(电脑端)演示
- 2. H5(手机端)演示
❀ 代码目录
❀二、3D相册(代码实现)
❀三、樱花雨3D相册裁剪(教程)
- 1.相片裁剪(教程)
- 2.美图秀秀(电脑版)裁剪图片
❀四、歌曲mp3更换教程(教程)
❀六、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
❀七、源码获取
❀ 八、更多表白源码

❀ 3D相册效果演示

1.❤100款表白源码演示地址

1. PC(电脑端)演示

在这里插入图片描述

2. H5(手机端)演示

在这里插入图片描述

❀ 代码目录

在这里插入图片描述

❀二、3D相册(代码实现)

1.html 背景部分

    <!-- 音乐 -->
    <audio controls autoplay>
      <source src="renxi.mp3">
  </audio>
  <!-- 背景 -->
  <div style="position:fixed;width: 100%;height:100%;top:0; z-index:-1;">
      <div id="background" class="wall"></div>
      <div id="midground" class="wall"></div>
      <div id="foreground" class="wall"></div>
      <div id="top" class="wall"></div>
  </div>
 <!-- 相册 -->
    <div id="jsi-cherry-container" class="container">
      <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>

2.css 相册绘制

@charset "utf-8";
* {
  margin: 0;
  padding: 0;
}
body {
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
}
li {
  list-style: none;
}
.box {
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  position: absolute;
  left: 42%;
  top: 45%;
  transform: translate(-50%,-50%);
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(13deg);
  -webkit-animation: move 5s linear infinite;
}
.minbox {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50px;
  top: 30px;
  -webkit-transform-style: preserve-3d;
}
.minbox li {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  top: 0;
}
.minbox li:nth-child(1) {
  background: url(../img/01.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {
  background: url(../img/02.png) no-repeat 0 0;
  -webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {
  background: url(../img/03.png) no-repeat 0 0;
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {
  background: url(../img/04.png) no-repeat 0 0;
  -webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {
  background: url(../img/05.png) no-repeat 0 0;
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {
  background: url(../img/06.png) no-repeat 0 0;
  -webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {
  background: url(../img/1.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {
  background: url(../img/2.png) no-repeat 0 0;
  -webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {
  background: url(../img/3.png) no-repeat 0 0;
  -webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {
  background: url(../img/4.png) no-repeat 0 0;
  -webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {
  background: url(../img/5.png) no-repeat 0 0;
  -webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {
  background: url(../img/6.png) no-repeat 0 0;
  -webkit-transform: rotateY(90deg) translateZ(50px);
}

3.js 樱花飘落

   <script>
      var RENDERER = {
        INIT_CHERRY_BLOSSOM_COUNT: 30,
        MAX_ADDING_INTERVAL: 10,

        init: function() {
          this.setParameters();
          this.reconstructMethods();
          this.createCherries();
          this.render();
        setParameters: function() {
          this.$container = $('#jsi-cherry-container');
          this.width = this.$container.width();
          this.height = this.$container.height();
          this.context = $('<canvas />')
            .attr({ width: this.width, height: this.height })
            .appendTo(this.$container)
            .get(0)
            .getContext('2d');
          this.cherries = [];
          this.maxAddingInterval = Math.round(
            (this.MAX_ADDING_INTERVAL * 1000) / this.width
          );
          this.addingInterval = this.maxAddingInterval;
        },
        reconstructMethods: function() {
          this.render = this.render.bind(this);
        },
      var CHERRY_BLOSSOM = function(renderer, isRandom) {
        this.renderer = renderer;
        this.init(isRandom);
      };
      CHERRY_BLOSSOM.prototype = {
        FOCUS_POSITION: 300,
        FAR_LIMIT: 600,
        MAX_RIPPLE_COUNT: 100,
        RIPPLE_RADIUS: 100,
        SURFACE_RATE: 0.5,
        SINK_OFFSET: 20,
        init: function(isRandom) {
          this.x = this.getRandomValue(
            -this.renderer.width,
            this.renderer.width
          );
          var axis = this.getAxis(),
            theta =
              this.theta +
              (Math.ceil(
                -(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy
              ) *
                Math.PI) /
                500;
          theta %= Math.PI * 2;

          this.offsetY =
            40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);
          this.thresholdY =
            this.renderer.height / 2 +
            this.renderer.height * this.SURFACE_RATE * axis.rate;
          this.entityColor.addColorStop(
            0,
            'hsl(330, 70%, ' + 50 * (0.3 + axis.rate) + '%)'
          );
          this.entityColor.addColorStop(
            0.05,
            'hsl(330, 40%,' + 55 * (0.3 + axis.rate) + '%)'
          );
          this.entityColor.addColorStop(
            1,
            'hsl(330, 20%, ' + 70 * (0.3 + axis.rate) + '%)'
          );
      $(function() {
        RENDERER.init();
      });
    </script>