动态404

index.html

<div class="a3-404">
  <div class="a3-container a3-min-height">
    <h1>4</h1>
    <h1>0</h1>
    <h1>4</h1>
    <h1>页面不存在</h1>
    <p><mu-raised-button label="回到首页" href="/" class="demo-raised-button" secondary/></p>
    <h2>或者联系客服</h2>
  </div>
</div>

script.js

const root = document.documentElement

const update = (e) => {
  if (e.acceleration && e.acceleration.x !== null) {
    root.style.setProperty('--X', e.acceleration.x)
    root.style.setProperty('--Y', e.acceleration.y)
  } else {
    root.style.setProperty('--X', (e.pageX / innerWidth) - 0.5)
    root.style.setProperty('--Y', (e.pageY / innerHeight) - 0.5)
  }
}

document.body.addEventListener('mousemove', update)
// 其提供设备的加速信息，表示为定义在设备上的坐标系中的卡尔迪坐标。其还提供了设备在坐标系中的自转速率
window.ondevicemotion = update

style.css

@media (max-width: 768px) {
  h2 {
    font-size: 16px;
  }
}
h1 {
  font-size: 110px;
  margin: 4px;
  display: inline-block;
}
@media (max-width: 768px) {
  h1 {
    -webkit-transition: all 0.25s ease 0s;
    transition: all 0.25s ease 0s;
    font-size: 60px;
  }
}
h1:nth-of-type(1) {
  color: #a22222;
  --scaleX: 40;
  --scaleY: -40;
  --translateX: calc((var(--X)) * var(--scaleX) * 1px);
  --translateY: calc((var(--Y)) * var(--scaleY) * 1px);
  -webkit-transform: translate(var(--translateX), var(--translateY));
          transform: translate(var(--translateX), var(--translateY));
  z-index: 3;
}
h1:nth-of-type(2) {
  color: #232323;
  --scaleX: -50;
  --scaleY: 50;
  --translateX: calc((var(--X)) * var(--scaleX) * 1px);
  --translateY: calc((var(--Y)) * var(--scaleY) * 1px);
  -webkit-transform: translate(var(--translateX), var(--translateY));
          transform: translate(var(--translateX), var(--translateY));
  z-index: 2;
}
h1:nth-of-type(3) {
  color: #888;
  --scaleX: 30;
  --scaleY: 30;
  --translateX: calc((var(--X)) * var(--scaleX) * 1px);
  --translateY: calc((var(--Y)) * var(--scaleY) * 1px);
  -webkit-transform: translate(var(--translateX), var(--translateY));
          transform: translate(var(--translateX), var(--translateY));
  z-index: 1;
}
h1:nth-of-type(4) {
    color: #fff;
  z-index: 4;
  --scaleX: -50;
  --scaleY: -50;
  --translateX: calc((var(--X)) * var(--scaleX) * 1px);
  --translateY: calc((var(--Y)) * var(--scaleY) * 1px);
  -webkit-transform: translate(var(--translateX), var(--translateY));
          transform: translate(var(--translateX), var(--translateY));
}