current position:Home>520 Valentine's Day gift for her ~ HTML + CSS + JavaScript flying snow 3D album (including music)

520 Valentine's Day gift for her ~ HTML + CSS + JavaScript flying snow 3D album (including music)

2021-08-22 22:54:48 @. code out the future

* 520 Valentine's Day present for her ~html+css+javascript Flying snow 3D Photo album ( Including music / Customizable text ) ~ A programmer must declare himself

annual /520 Valentine's Day / Valentine's day on Chinese Valentine's day / a birthday present / Confession younger martial sister / Christmas / New year's day and new year's Eve / Programmer's confession , Do you want to surprise your girlfriend or your sister , Today's blog will share the front-end code html+css+javascript How to achieve 3D Three dimensional dynamic album . I quickly learned , Let's make the romance that belongs to our programmers !

Before confession , Our message area is open to you ! Let's show you a different way to express yourself , And the one you love ta Let's make it clear !



* Preface

For programmers ,“ single ” Still the biggest thing in life bug, The point is that you can't debug yet . As the saying goes “ Since ancient times, heroes are lonely ”, But life without a partner is always incomplete . Besides, , From the annual love ( abuse ) people ( Dog ) The festival is not far away .


* Flying snow 3D Photo album / With background music / Customizable text With background color gradient

Flying snow 3D Photo album - Online demo address

1. PC( Computer terminal ) demonstration

 Insert picture description here

2. H5( Mobile terminal ) demonstration

 Insert picture description here

* Code file directory

 Insert picture description here

One 、3D Photo album ( Code implementation )

html (3D Album section )

   <!--  White snowflakes fall  -->
    <div class="drop"></div>
    <!--  typing  -->
    <div class="typing">
      <!--  subtitle  -->
      <h2 class="header-sub-title" id="word"></h2>
      <h2 class="header-sub-title blink">|</h2>
    </div>
    <!--  Starry sky  -->
    <div class="landscape"></div>
    <div class="filter"></div>
    <canvas id="canvas"></canvas>
    <!--  Auto play  -->
    <!--  Photo album  -->
    <div id="jsi-snow-container" class="container"></div>
    <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>

js ( The starry part )

Text printing ( find index.html Next ) Just modify the text
 Insert picture description here

     <script>
      var d = "<div class='maple'><div>";
      setInterval(function () {
    
        var f = $(document).width();
        var e = Math.random() * f - 300; //  The location of snowflakes left value 
        var o = 0.2 + Math.random(); //  The transparency of snowflakes 
        var fon = 25 + Math.random() * 10; //  Snowflake size 
        var l = e - 100 + 200 * Math.random(); //  The lateral displacement of snowflakes 
        var k = 8000 + 5000 * Math.random();
        var deg = Math.random() * 360; //  The direction of snowflakes 
        $(d)
          .clone()
          .appendTo(".maplebg")
          .css({
    
            left: e + "px",
            opacity: o,
            transform: "rotate(" + deg + "deg)",
            "font-size": fon,
          })
          .animate(
            {
    
              top: "550px",
              left: l + "px",
              opacity: 0.1,
            },
            k,
            "linear",
            function () {
    
              $(this).remove();
            }
          );
      }, 500);
    </script>

css (3D Album section )

.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 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);
}
.maxbox {
    
  width: 800px;
  height: 400px;
  position: absolute;
  left: 0;
  top: -20px;
  -webkit-transform-style: preserve-3d;
}
.maxbox li {
    
  width: 200px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.2;
  -webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {
    
  -webkit-transform: translateZ(100px);
}
.maxbox li:nth-child(2) {
    
  -webkit-transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {
    
  -webkit-transform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {
    
  -webkit-transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {
    
  -webkit-transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {
    
  -webkit-transform: rotateY(90deg) translateZ(100px);
}

Two 、3D Album clipping ( course )

The tutorial is as follows : need 12 A picture ( Customizable 12 Zhang )

1-6 The picture is big 400px*400px ,01-06 The picture is a small picture 100px*100px

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

 Insert picture description here

1. Photo cutting ( course )

First : Download Meitu XiuXiu / Baidu download / Or software installation
Or use online links to crop —> Online clip image links
 Insert picture description here

2. Meitu Xiu Xiu ( Computer version ) Cut the picture

2.1 Select Picture clipping
 Insert picture description here

3、 ... and 、 song mp3 Replace tutorial ( course )

If it needs to be replaced mp3 The background music , You can download and replace it by yourself ~ mp3 Free download address
1. Search for songs you need

 Insert picture description here

2. download
 Insert picture description here

3 Get songs id
 Insert picture description here

4 Pay attention to the official account. / Copy link to browser open

 Insert picture description here

5 download mp3 ~ After downloading, replace it by yourself mp3 File can ( If you don't want to modify the code , The name must be consistent )
 Insert picture description here


Four 、 Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( It can be used permanently and free of charge )

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


5、 ... and 、 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


6、 ... and 、* 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


7、 ... and 、* 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/20210822225446129r.html

Random recommended