Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

Demo: home page for free source code

​

Code directory:

​

Main code implementation:

Partial CSS styles:

body { margin: 0; overflow: hidden; position: relative; width: 100vw; height: 100vh; background-image: url(".. /img/bg.jpg"); background-size: cover; } canvas { display: block; } #canvas_container { width: 100%; height: 100vh; } button { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); border: 1px solid white; border-radius: 5px; The font - size: 0.9 rem; Padding: 0.5 rem em 0.9; background: #000000; color: white; -webkit-font-smoothing: antialiased; font-weight: bold; cursor: pointer; transition: all .5s; } button:hover { background: #ffffff; color: #000000; }Copy the code

HTML code:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Dreaming of Jupiter - Three.js</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="canvas_container"></div> <button Id ="fullscr"> </button> <script SRC ='js/three.min.js'></script> <script SRC ="js/script.js"></script> </body> </ HTML >Copy the code

The source code for

View the homepage of the blogger or private message from the blogger

Wonderful recommendation update:

HTML5 big homework actual combat 100 sets

Clocked articles updated **40 ** / 100 days

You can like, collect, pay attention to, comment on me, need to complete the document at any time contact me or exchange yo ~!

​

​