- PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”, please see: Spring Festival Creative Submission Contest”
The Nuggets were having an event and they said let me play, so here I am, oh no, here he is here he’s here, he’s coming with fireworks.
All right, check out the fireworks effects landing page I wrote
Project: New Year fireworks login page project
Description: New Year fireworks login page template HTML+CSS+JavaScript. The main page includes Settings, login, download, personal information, forget password, play, tools and other pages.
Video link: Promoted after six months on the job? Just do this login page HTML + CSS + JS
Implementation technology: CSS+HTML+JS+H5+CSS3+jQuery;
demo
1. The front page of the website looks like this
2. The expansion looks like this
3. After clicking the TAB, it looks like this
4. The login popup looks like this
The directory structure
The code shown
<style type="text/css"> div.jGrowl div.manilla { background-color: #FFF1C2; color: navy; } div.jGrowl div.smoke { background: url('images/smoke.png') no-repeat; -moz-border-radius: 0px; -webkit-border-radius: 0px; width: 298px; height: 73px; overflow: hidden; } div.jGrowl div.flora { background: #E6F7D4 url(flora-notification.png) no-repeat; -moz-border-radius: 0px; -webkit-border-radius: 0px; opacity: 1; filter: alpha(opacity=100); width: 270px; height: 90px; padding: 0px; overflow: hidden; border-color: #5ab500; } div.jGrowl div.flora div.message { padding: 5px; color: #000; } div.jGrowl div.flora div.header { background: url(flora-header.png) no-repeat; padding: 5px; } div.jGrowl div.flora div.close { background: url(flora-close.png) no-repeat; padding: 5px; color: transparent; padding: 0px; margin: 5px; width: 17px; } div.jGrowl div.iphone { font-family: "Helvetica Neue", "Helvetica"; font-size: 12px; background: url(iphone.png) no-repeat; -moz-border-radius: 0px; -webkit-border-radius: 0px; opacity: .90; filter: alpha(opacity=90); width: 235px; height: 137px; overflow: hidden; border-color: #5ab500; color: #fff; } div.jGrowl div.iphone .jGrowl-close { padding-right: 20px; } div.jGrowl div.iphone div.message { padding-top: 0px; padding-bottom: 7px; padding-left: 15px; padding-right: 15px; } div.jGrowl div.iphone div.header { padding: 7px; padding-left: 15px; padding-right: 15px; font-size: 17px; } div.jGrowl div.iphone div.close { display: none; } div#random { width: 1000px; background-color: red; line-height: 60px; } </style> <div id="test2" class="bottom-left"></div> <div id="Loading" class="demo-3 demo-dark" style="z-index:10002; position:fixed; margin-left:47%; margin-top:9%; display:none;" > <div class="container"> <section class="main"> <! -- the component --> <ul class="bokeh"> <li></li> <li></li> <li></li> <li></li> </ul> </section> </div> </div>Copy the codeDo a good web page effect, how to send links to others to see?
1.1 Solution deployment Online ~> Deployment Online Tool (Free forever)
1 do not need to buy a server can be deployed online, the world can access your connection, here to recommend a programmer essential artifact ~ easy to understand, simply artifact ~ need to need to contact my home page to obtain
2 is to put your code effect done, deployed to the online, send the link to others, you can let each other through your connection to click in, you can see your web page effect, computer and mobile terminal can oh! (Otherwise, other people have to send files to see your web page, the experience is not good ~)
The last
The blogger is honest, answers questions for free, and also makes some learning videos to teach students
If helpful to you, I hope you can give 👍/ comments/favorites
Your three lines ~ are the biggest motivation to support my creation