current position:Home>520 Chinese Valentine's Day confession gift: illusory and romantic love story - 520 3D photo album with a long starry sky (HTML + CSS + JavaScript)

520 Chinese Valentine's Day confession gift: illusory and romantic love story - 520 3D photo album with a long starry sky (HTML + CSS + JavaScript)

2021-08-22 22:46:47 @. code out the future

《520 Tanabata Valentine's Day confession gift 》: Unreal romantic love story ——520 The starry sky is long 3D Photo album (HTML+CSS+JavaScript)

520 Tanabata Festival advertisement , That is Chinese Valentine's Day , What else can you do besides sending flowers ?? Come and make a high-end and high-grade confession web page

Although there is no affectionate confession , There is no sincere promise , But in letting nature take its course, we become each other's only . The rest of my life is long , I am willing to hold hands with you in the wind and rain , Grow old together in plain .

Introduction to confession works

1. Introduction to web works :520 Tanabata Valentine's day advertising website HTML , You can download what you like , The article page supports mobile phones PC Responsive layout . It can be used directly by replacing photos !

2. Web work editing : This work is the theme of Tanabata Valentine's day advertisement Web page design , The code is gorgeous and cool HTML+CSS+JavaScript Layout making , After downloading the works, you can use any HTML Edit software ( for example :DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm All editors are available )

3. Technical aspects of web works : Use CSS Made cool star flashing highlights 、 The mouse can drag the picture and slide the effect 、 Use at the same time JavaScript Automatically switch the multi gradient color effect of the background picture ( Customizable replacement )、HTML Added background music ( Customizable replacement ),.

One 、 Demonstration of works

1.PC End computer end ( demonstration )

>>> Click to enter >>>100 Paragraph confession source code demonstration address

 Insert picture description here

 Insert picture description here
 Insert picture description here

2.H5 Mobile terminal ( demonstration )

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

Two 、 Code directory

 Insert picture description here

3、 ... and 、 Code implementation ( course )

1. This single page source code , It was carefully made by a programmer for his girlfriend , Friends in need can modify the source code and give her a different virtual gift .

2. The whole layout is very good , The display of mobile phone and computer is very good , I also like , Added The background music / Automatically switch the unreal background / Auto rotate album / Video playback, etc , Background music can also make what you want to say , Or sing your own song . This is also very good .

html Starry background ( part )

Music replacement : If it needs to be replaced mp3 The background music , You can download it yourself and find mp3 Folder Replace it ~ Poke me >>> As a free download MP3
Be careful : The name of the downloaded music file needs to be modified and mp3 In a folder 520.mp3 Just keep your name consistent

    <audio controls autoplay>
    <!--  Music playing  -->
        <source src="mp3/Approaching%20Nirvana%20-%20You.mp3">
    </audio>
    
      <!--  Starry background S -->
    <div style="position:fixed;width: 100%;height:100%;top:0;">
        <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>
    <!--  Starry background E -->

html 3D Photo album ( part )

Making tutorials : Get ready 6-10 This photo works best
Album replacement : find img Folder Just replace the photo
Be careful : The photo suffix is .jpg
 Insert picture description here

    <!-- 3D Rotating album  -->
    <div id="drag-container">
        <div id="spin-container">
            <!--  photo   You can put more than one  6-10 Zhang Yiyi -->
            <img src="img/1.jpg" alt="">
            <img src="img/2.jpg" alt="">
            <img src="img/3.jpg" alt="">
            <img src="img/4.jpg" alt="">
            <img src="img/5.jpg" alt="">
            <img src="img/6.jpg" alt="">
            <img src="img/7.jpg" alt="">
            <img src="img/8.jpg" alt="">
            <img src="img/9.jpg" alt="">
            <img src="img/10.jpg" alt="">
            <!--  Can put the picture of the outer chain  -->
            <!-- <a target="_blank" href="img/pexels-photo-139829.jpeg"> <img src="img/pexels-photo-139829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> </a> -->
            <!--  Advertising video  -->
            <!-- <video controls autoplay="autoplay" loop> <source src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR_D.VA_SHOOTING_STAR_zhCN_YT_PC_3.mp4?s=338c48ac2dfcb1d4c0689968b5baf94eee6ca0c1&profile_id=165&oauth2_token_id=57447761" type="video/mp4"> </video> -->

            <!--  Advertising text -->
            <p>520-- Small qian </p>
        </div>
        <div id="ground"></div>
    </div>

css Starry sky ( part )

This code background: url("../bgimg/bg8.jpg") no-repeat; For the first time to show the background Self replaceable
Replace tutorial : Need to find bgimg Background image under folder , Or add the background picture you want

html, body {
    
  margin: 0;
  padding: 0;
}
audio {
    
  position: absolute;
  bottom: 0;
  opacity: 0.1;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
  transition: all 2s;
}

div#background {
    
  background: url("../bgimg/bg8.jpg") no-repeat;
  -webkit-animation: dd 100s linear infinite;
  -moz-animation: dd 100s linear infinite;
  -o-animation: dd 100s linear infinite;
  animation: dd 100s linear infinite;
}

div#midground {
    
  background: url("../bgimg/midground.png");
  z-index: 1;
  -webkit-animation: cc 100s linear infinite;
  -moz-animation: cc 100s linear infinite;
  -o-animation: cc 100s linear infinite;
  animation: cc 100s linear infinite;
}

div#foreground {
    
  background: url("../bgimg/foreground.png");
  -webkit-animation: cc 153s linear infinite;
  -o-animation: cc 153s linear infinite;
  -moz-animation: cc 153s linear infinite;
  animation: cc 153s linear infinite;
}

@-webkit-keyframes cc {
    
  from {
    
    background-position: 0 0;
  }
  to {
    
    background-position: 600% 0;
  }
}

@-o-keyframes cc {
    
  from {
    
    background-position: 0 0;
    transform: translateY(105px);
  }
  to {
    
    background-position: 600% 0;
  }
}


Javascript Automatically switch background ( part )

Automatically switch background time : The default is 600, That is to say 6 millisecond If you need to modify the time take 600 Modified into 1000 That is to say 1 second 2000 Namely 2 second ....


num = 10;
$(function() {
    
  let count = 0
  setInterval(function() {
    
      if (num < 100) {
    
          num += 10;
          numT = num + '%';
      } else {
    
          num = -10;
          /*  Background switching  */
          if (count < 2) {
    
              count++;
          } else if (count >= 2&&count < 4) {
    
            /*  Background map  */
            $('div').find('#background').css('background', 'url(bgimg/bg1.jpg) no-repeat');
            count++;
    }
    else if (count >= 4&&count < 6) {
    
            /*  Background map  */
            count++;
            $('div').find('#background').css('background', 'url(bgimg/bg2.jpg) no-repeat');
    }
    else if (count >= 6&&count< 8) {
    
            /*  Background map  */
            count++;
            $('div').find('#background').css('background', 'url(bgimg/bg3.jpg) no-repeat');
    }
    else if (count >= 8) {
    
            /*  Background map  */
        count = 0;
            $('div').find('#background').css('background', 'url(bgimg/bg4.jpg) no-repeat');
    }

      }
  }, 600);
})

Four 、web Front end entry to advanced ( video + Source code + Information + interview ) a full set of ( course )

web 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 ~ send 1000 set HTML+CSS+JavaScript Template website
 Insert picture description here


5、 ... 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 graduates HTML Templates 、 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

6、 ... and 、 More advertising source code

1.100 paragraph html+css+JavaScript Declare the source code demonstration address

2.520 A birthday present for your girlfriend on Valentine's Day ~html+css+js Realize the cool cherry blossom of shaking sound 3D Photo album ( Including music )

3. One line of code teaches you to catch your sister easily ~html+css+js Fireworks advertisement 3D Photo album ( Including music + Customizable text )

4. 520 Valentine's Day present for her ~html+css+javascript Flying snow 3D Photo album ( Including music )

5. 520 Watch the meteor shower with her on Valentine's Day ~html+css+javascript Making meteor shower 3D Photo album ( Including music )

6. html+css+js Happy birthday website template (520/ Valentine's day on Chinese Valentine's day / A confession / To marry him / Happy birthday, ) With background music

7. html+css+js Happy birthday, ~ Happy birthday for programmers html Templates ( Including birthday background music )

8. Girlfriend's birthday HTML+css3+js Realize the cool cherry blossom of shaking sound 3D Photo album ( With background music ) A programmer must declare himself

9. How do I use a line of code to express my sister 520 For your girlfriend on Valentine's day 3D Cherry rain photo album gift ( Programmer confession exclusive )

10. Valentine's day on Chinese Valentine's day ~html+css+javascript Realize the full screen love effect ( Programmer's confession )

11. Tanabata Valentine's Day flower advertising animation (HTML+CSS+JavaScript)

12. html+css+js Make a wedding countdown web page template (520/ Valentine's day on Chinese Valentine's day / Programmer advertisement )

13. html+css+javascript Make love confession code (520/ Valentine's day on Chinese Valentine's day / A confession / a birthday present )

14. Stunning html+css+javascript Phantasm 3D Photo album ( With background music ) A programmer must declare himself _520_ Valentine's day on Chinese Valentine's day

15. html+css+javascript Realization 100 Super cool advertising source code (520/ The seventh evening of the seventh moon / A confession / To marry him / Take off a single ) Programmers must

16. html+css+javascript Realization 520 Advertising love tree ( Including music ) A programmer must declare himself

17. html+css+javaScript Achieve cool fireworks confession ( Cloud particle text 3D start )

18. The programmer 520 A confession Html+Js+Css Petal album web page template programmer must express

19. html+css+javascript Realize the heaven and earth Bagua feng shui compass clock ( Free with source code )

20. html+css+javascript To achieve the tiktok clock ( Free with source code )

21. Tiktok JavaScript Realize the network red astronaut dial ~ Look at how programmers use code to make Huawei space watches

22. html+css+js Draw snow in winter 3D Photo album (520 Valentine's Day / Valentine's day on Chinese Valentine's day / Programmer's confession html Code )

23. Make a romantic and warm birthday gift for her ~html+css+javascript Blue dream ocean 3D Photo album ( Including music )

24. html+css+js Make 520 Express the web page , Full screen love and white language web page animation code , romantic 520 Love expression animation special effects .

25. 520 Valentine's Day programmer's romantic confession ~html+css+js Romantic starry love 3D Photo album ( Including music )

26. Html5 Romantic wedding invitation wedding website template _ Love her and give her the most beautiful H5 Wedding invitation _( Wedding electronic invitation ) With background music

27. html+css+javascript Full screen snowflake love 520 Confession website ( Including music )520 A confession / Valentine's day on Chinese Valentine's day / a birthday present / A programmer must declare himself

28. 520 Tanabata Valentine's Day code gave a gift to his girlfriend ~html+css+javascript Realize Cherry Blossom love album 「 You can take it to the person you like 」

29. Tanabata Valentine's day teaches you how to confess ~html+css+js Making beautiful stars 3D Photo album ( Including music ) The programmer 520 Confession essential

30. html+css+javascript Happy birthday fireworks 520/ Confession / Valentine's day on Chinese Valentine's day / Proposal only ( Custom text )

31. One line of code teaches you how to advertise on Tanabata Valentine's Day — Comic 3D Photo album ( music + written words )HTML+CSS+JavaScript

32.HTML+CSS+JavaScript Make Tanabata confession web page ( Including music + Custom text )

33. Birthday present for Xuemei ~ Make a super romantic advertisement 3D Photo album (HTML+CSS+JavaScript)

34.HTML+CSS+JavaScript Making romantic balloons 520 Advertising album

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

Random recommended