小编Ann*_*a_B的帖子

* {
margin: 0;
padding: 0;
}

.object {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
background-color: rgb(200, 200, 200);
}

<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";

import { OBJLoader } from "https://threejs.org/examples/jsm/loaders/OBJLoader.js";

var container;

var camera, scene, renderer;

var mouseX = 0,
    mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var object;

init();
animate();

function init() {
    container = document.createElement("div");
    container.className …

const mediaInViewport = document.querySelectorAll('.media');
const links = Array.from(document.querySelectorAll('.link'));
let actLink = links[0];

document.body.addEventListener('click', (event) => {
  if (event.target.tagName === 'a') {
    actLink.classList.remove('active');
    actLink = links.find(link => event.target.href === link.href)
    actLink.classList.add('active');
  }
}, false)

observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.target && entry.isIntersecting) {
      const closestParent = entry.target.closest('section');
      if (closestParent) {
        actLink.classList.remove('active');
        actLink = links.find(link =>
          link.href.slice(link.href.lastIndexOf('#')) === `#${closestParent.id}`
        )
        actLink.classList.add('active');
      }
    }
  });
}, {
  threshold: 0
});

window.addEventListener('DOMContentLoaded', () => {
  setTimeout( // …

* {\n  margin: 0;\n  padding: 0;\n  font-family: Arial;\n}\n\nol {\n  counter-reset: item;\n}\n\nli {\n  display: block;\n}\n\nli:before {\n  content: counters(item, ".") "\xe2\x80\x83";\n  counter-increment: item;\n}\n\nol li ol li {\n  margin-left: 80px; /* The left margin should have exactly the width of one number and a   */\n}

<ol>\n  <li>Coffee\n    <ol>\n      <li>One</li>\n      <li>Two</li>\n      <li>Three</li>\n    </ol>\n  </li>\n  <li>Tea\n    <ol>\n      <li>One</li>\n      <li>Two</li>\n      <li>Three</li>\n    </ol>\n  </li>\n  <li>Milk</li>\n  <li>Cool</li>\n</ol>

div {
  color: white;
  font-size: 70px;
  padding: 20px;
  display: inline-block;
  font-family: Arial;
  background: azure;
}

.canvas {
  width: 500px;
  height: 500px;
}

.object-one {
  background: blue;
}

.object-two {
  background: red;
}

.object-three {
  background: green;
}

<script src="https://raw.githubusercontent.com/liabru/matter-js/master/build/matter.js"></script>

<div class="canvas">

  <div class="object-one">One</div>
  <div class="object-two">Two</div>
  <div class="object-three">Three</div>

</div>

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
  box-shadow: 0 0 30px red, 0 0 30px red;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg">
</div>