代码

html

\\background parallax.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="background parallax.css">
    <title>Parallax css</title>
</head>
<body>
<section>
  <h2>Parallex</h2>
</section>

<div class="rbox layer" data-speed="2"></div>
<div class="gcross layer" data-speed="-6"></div>
<div class="bolt layer" data-speed="7"></div>
<div class="circle layer" data-speed="9"></div>
<div class="tri layer" data-speed="-4"></div>

<script type="text/javascript">
  document.addEventListener('mousemove',parallax);
  function parallax(e){
    this.querySelectorAll('.layer').forEach(layer => {
      const speed = layer.getAttribute('data-speed');

      const x = (window.innerWidth - e.pageX*speed)/100;
      const y = (window.innerHeight - e.pageY*speed)/100;
      layer.style.transform = 'translateX('+x+'px)'+'translateY('+y+'px)';
    })
  }
</script>
</body>

css

\\background parallax.css
*{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
}


body{
  background: #111;
  height:100vh;
}
section{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body h2{
  color: #fff;
  z-index: 2;
}

.rbox{
  position: absolute;
  top:35%;
  left:25%;
  width: 26px;
  height: 26px;
  background-color: transparent;
  border:3px;
  border-style: solid;
  border-color: yellow;
  border-radius: 15%;
  z-index: 1;
}
.gcross{
  position: absolute;
  top:64%;
  left:32%;
  height: 32px;
  width: 2px;
  background-color: red;
  transform: rotate(45deg);
}
.gcross::after{
  content: '';
  position: absolute;
  top:15px;
  left:-15px;
  width: 32px;
  height: 2px;
  background-color: red;

}
\\background parallax.css
.bolt{
    position:absolute;
    top:28%;
    left:70%;
  transform: skewX(-10deg);
}
.bolt::before{
    content:"";
    position:absolute;
    margin-top:-3em;
    margin-left:-1.5em;
    border-top:2em solid transparent;
    border-right:1em solid cyan;
    border-bottom:2em solid cyan;
    border-left:1em solid transparent;
}
.bolt::after{
    content:"";
    position:absolute;
    margin-left:-0.5em;
    border-top:2em solid cyan;
    border-right:1em solid transparent;
    border-bottom:2em solid transparent;
    border-left:1em solid cyan;
}
.circle{
  position: absolute;
  width:24px;
  height:24px;
  top:49%;
  left:52%;
  border:3px solid pink;
  border-radius: 100%;
}
.tri{
  position:absolute;
  top:62%;
  left:78%;
  width:0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid transparent;
  border-bottom: 30px solid lightgreen;
  
}
.tri::after{
  content: '';
  position: absolute;
  top:-16px;
  left:-11px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 22px solid transparent;
  border-bottom: 22px solid #111;
}