?520七夕情人節(jié)告白網(wǎng)頁代碼?—浪漫夢(mèng)幻3D相冊(cè)(櫻花主題)HTML+CSS+JavaScript
2021-10-20 10:27:49

<!-- 音樂 -->
<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>
<!-- 相冊(cè) -->
<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>

@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);
}

<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>