annual /520/ Valentine's day on Chinese Valentine's day / Girlfriend's birthday / Programmer's confession , Do you want to surprise your girlfriend or your sister , Today, this blog will share how to implement the front-end code 3D Three dimensional dynamic album . I quickly learned , Let's make the romance that belongs to our programmers ！

Tanabata Valentine's day [ Sakura Drops 3D Photo album ], Programmers can also be romantic ! The programmer expresses his special code to his sister !
HTML+css3+js Tiktok is very loud 3d Rotating album - Including music ,( Give it to your girlfriend , Confession , Birthday ) Dynamic generation effect , It's made in this way ~, Now? , More and more people like to record their life with video , Friends with more photos will also choose to make dynamic album videos , Not only is it creative , At the same time, you can show yourself , It's a magic tool for teasing girls !

* Cherry Blossom rain 3D Photo album ( With background music )

Online demo address
Text prologue + Demo address

* Add some glowworm glittering effect ??
Online demo address

Text prologue + Demo address

* Blue background

* H5 End

* ( Animation ) Blue dream ocean web page special effects ( You can replace the background picture by yourself )

Online demo address

* Dynamic effect demonstration ( There are too many to demonstrate one by one )

* html5+canvas Petals scattered in the brilliant air 3D Photo album H5 End

Online demo address

Text prologue + Demo address

* html5+canvas Petals scattered in the brilliant air 3D Photo album PC End

Online demo address

Text prologue + Demo address

* Christmas *( Snowflakes fall )3D Photo album ( With background music )

Online demo address

Dynamic renderings ( Compatible H5 Mobile and pc End )

It's equipped with MP3 Music files , You can replace what you like MP3, Free download tutorial below

H5 Mobile

PC Computer terminal

Static large picture effect display

New Year Fireworks Show / Pay New Year's call / Valentine's Day html+css+js Put on a romantic fireworks show ( Including music / Custom photos ) Programmers must declare fireworks

1. New year fireworks demonstration address

2. Declare the fireworks demonstration address

3. Opening statement - Fireworks line demo address

520 It's Valentine's day , As a program ape, I gave my girlfriend a gift with code 「 You can take it to the person you like 」

spot ↓↓↓ Click the link below to view the online address

Online demo address

Let's have some cherry blossoms to decorate it

spot ↓↓↓ Click the link below to see the effect

Fireworks online demonstration address

rotate 3D Meteor shower album ( Rotatable / Drag and drop / rolling - Including music )

Online demo address

Help programmers get their girls html+css+js Fireworks show ( Including music ) You can edit text by yourself

Online demo address

* New year's Day / Across the world *( Photo wall )3D Photo album / With background music / Customizable text With a variety of album graphics changes

Online demo address

Computer terminal

spot ↓↓↓ Click the link below to view the online address

Online demo address

Mobile terminal

Dynamic effect

Static effect

520 Confession Html+Js+Css Realize snowflake love ( love 3D Animation , Custom text )/ A programmer must declare himself

Original address

Online demo address

* New year's Day / Across the world *( The sky is full of stars )3D Photo album / With background music / Customizable text With background color gradient

Online demo address

* *html+css+js* Draw snow in winter 3D Photo album (521 Programmers make their code public )

Original address
Online demo address

3d Photo album making course

need 12 A picture , 1-6 The picture is big 400400 ,01-06 The picture is a small picture 100100

Will be ready for the picture , Replace... By yourself images The picture in the file can be

Meitu Xiu Xiu ( Computer version ) Cut the picture

Online clip image links

MP3 As a free download

mp3 Free download address
If it needs to be replaced mp3 The background music , You can download and replace it by yourself …

mp3 Download the tutorial

* -------------------- All right, no more nonsense On the subject >>>> Cherry Blossom rain 3D The album code is as follows --------------------

* Cherry Blossom rain 3D The album code is as follows

* File directory

* html Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery.min.js"></script>
    <link type="text/css" href="./css/style.css" rel="stylesheet" />
    <style> html, body {
       width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .container {
       width: 100%; height: 100%; margin: 0; padding: 0; background-color: #000000; } </style>
  </head>
  <body>
    <audio autoplay="autopaly">
      <source src="renxi.mp3" type="audio/mp3" />
    </audio>
    <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>
  <script> .... </script>
  </body>
</html>

* Album rotation css Code

@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;
	margin-left: 42%;
	margin-top: 22%;
	-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(../images/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
    
	background: url(../images/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
    
	background: url(../images/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
    
	background: url(../images/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
    
	background: url(../images/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
    
	background: url(../images/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
    
	background: url(../images/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
    
	background: url(../images/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
    
	background: url(../images/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
    
	background: url(../images/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
    
	background: url(../images/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
    
	background: url(../images/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}

* Sakura Drops js Code

      var RENDERER = {
    
        INIT_CHERRY_BLOSSOM_COUNT: 30,
        MAX_ADDING_INTERVAL: 10,

        init: function() {
    
          this.setParameters();
          this.reconstructMethods();
          this.createCherries();
          this.render();
          if (
            navigator.userAgent.match(
              /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
            )
          ) {
    
            var box = document.querySelectorAll('.box')[0];
            console.log(box, ' Mobile ');
            box.style.marginTop = '65%';
          }
        },
        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);
        },
        createCherries: function() {
    
          for (
            var i = 0,
              length = Math.round(
                (this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000
              );
            i < length;
            i++
          ) {
    
            this.cherries.push(new CHERRY_BLOSSOM(this, true));
          }
        },
        render: function() {
    
          requestAnimationFrame(this.render);
          this.context.clearRect(0, 0, this.width, this.height);

          this.cherries.sort(function(cherry1, cherry2) {
    
            return cherry1.z - cherry2.z;
          });
          for (var i = this.cherries.length - 1; i >= 0; i--) {
    
            if (!this.cherries[i].render(this.context)) {
    
              this.cherries.splice(i, 1);
            }
          }
          if (--this.addingInterval == 0) {
    
            this.addingInterval = this.maxAddingInterval;
            this.cherries.push(new CHERRY_BLOSSOM(this, false));
          }
        }
      };
      var CHERRY_BLOSSOM = function(renderer, isRandom) {
    
        this.renderer = renderer;
        this.init(isRandom);
      };

More demos

Html5+canvas Love tree express animation template code ( With background music )

Online demo address

* html5+canvas Happy birthday text fireworks background animation special effects

Online demo address

* html+js+css Happy birthday,

Online demo address

* A shooting star 3D Photo album

Online demo address

* Tiktok clock ( Free with source code )

Online demo address

* front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of

* Express the source code

* Other material source code

* Special effects

* 150 set Echart Chart source code

Ten thousand years is too long , together with you , seize every minute .
A love letter for you , A love word for you , For the rest of your life .
The future I want , It's getting up every morning , I can see you and the sunshine .

Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( Use for free forever )

1. You don't need to buy a server to deploy online , Your connection is accessible all over the world , Here is a necessary artifact for programmers ~
Plugins are integrated with super easy-to-use plug-ins , Download and install for free , Simple and easy to understand , It's an artifact ~ If necessary, it can be found in the article ↓ Xiagong Z Number acquisition

2. Is to do your code effect well , Deploy online , Send links to others , You can let the other party click in through your connection , You can see the effect of your web page , Both computer and mobile terminals are OK ! ( Otherwise, people will send files when they see your web page , The experience is not very good ~)

1.1 Deployment process

1.2 wow ~ Deployment success

wow ~ Deployment success ! Deploy your written page online , People all over the world can access your web page through links ( Free forever )~

---

front end Zero basis Entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~

---

* The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」！

* 3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

---

* More confession source code

100 Paragraph confession source code demonstration address