current position:Home>Girlfriend birthday HTML+css3+js to achieve the tiktok cherry 3D album (including background music) programmers must express the necessary

Girlfriend birthday HTML+css3+js to achieve the tiktok cherry 3D album (including background music) programmers must express the necessary

2021-08-22 22:58:01 @. code out the future

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

 Insert picture description here
 Insert picture description here

* Blue background

 Insert picture description here

* H5 End

 Insert picture description here

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

Online demo address
 Insert picture description here

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

 Insert picture description here

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

Online demo address

Text prologue + Demo address

 Insert picture description here

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

Online demo address

Text prologue + Demo address

 Insert picture description here

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

Online demo address
 Insert picture description here

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

 Insert picture description here

PC Computer terminal

 Insert picture description here

Static large picture effect display

 Insert picture description here

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

 Insert picture description here
 Insert picture description here
 Insert picture description here
 Insert picture description here

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

 Insert picture description here

Let's have some cherry blossoms to decorate it

 Insert picture description here

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

Fireworks online demonstration address

 Insert picture description here

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

Online demo address

 Insert picture description here

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

Online demo address
 Insert picture description here

* 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

 Insert picture description here

Computer terminal

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

Online demo address

 Insert picture description here
 Insert picture description here

Mobile terminal

Dynamic effect

 Insert picture description here

Static effect

 Insert picture description here

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

Original address

Online demo address

 Insert picture description here
 Insert picture description here

* 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

 Insert picture description here

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

Original address
Online demo address
 Insert picture description here

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
 Insert picture description here

Meitu Xiu Xiu ( Computer version ) Cut the picture

 Insert picture description here
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

 Insert picture description here

* 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
 Insert picture description here

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

Online demo address
 Insert picture description here

* html+js+css Happy birthday,

Online demo address

 Insert picture description here

* A shooting star 3D Photo album

Online demo address
 Insert picture description here

* Tiktok clock ( Free with source code )

Online demo address
 Insert picture description here

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

 Insert picture description here

* Express the source code

 Insert picture description here

* Other material source code

 Insert picture description here

* Special effects

 Insert picture description here

* 150 set Echart Chart source code

 Insert picture description here

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

 Insert picture description here

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

 Insert picture description here


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 ~
 Insert picture description here


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

 Insert picture description here


* More confession source code

100 Paragraph confession source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225759829a.html

Random recommended