preface
Having a nice background for a landing page, or a blog background, is a great 3D effect. Let me show you a screenshot
The effect
Don’t record a review, give you the code, directly into the local new HTML can be. Then open the browser directly, otherwise you can’t see the effect.
< HTML lang="en" class="page-fill"> <head> <meta charset="UTF-8"> <title> A beautiful background </title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="https://tenant.cloudbed.vip/images/favicon.ico" type="image/x-icon"/> <link rel="stylesheet" href="https://tenant.cloudbed.vip/css/login_style.css"/> <link rel="stylesheet" href="https://tenant.cloudbed.vip/css/login_reset.css"/> </head> <body> <div id="particles-js"> <div class="sk-rotating-plane"></div> </div> <script src="https://tenant.cloudbed.vip/js/particles.min.js"></script> <script src="https://tenant.cloudbed.vip/js/app.js"></script> <script src="https://tenant.cloudbed.vip/lib/layui/layui.js"></script> <script> layui.use(["okUtils", "okLayer"], function () { $ = layui.jquery; var okUtils = layui.okUtils; okLayer = layui.okLayer; $("body").keyup(function(event){ if(event.keyCode==13) { $(".login-button").click(); }}); }); </script> </body> </html>Copy the codedismantling
Code above, using the LayUI layout, plus some CSS style processing. I like the effect, and the code is directly down to the local.
Login.html used to have a login box, but I removed it because ALL I wanted was a background. His login box looked something like this:
conclusion
Simple front end style collection, this effect can be collected and recorded, good effect. Let’s come on