wallpaper/ghost.html at main · kumacoolgo/wallpaper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>The little ghost is staring at my mouse, what should I do?</title>
    <style>
      html,body{background:#28254c;font-family:'Ubuntu';}*{box-sizing:border-box;}.box .box__ghost{padding:15px 25px 25px;position:absolute;left:50%;top:30%;transform:translate(-50%,-30%);}.box .box__ghost .symbol:nth-child(1){opacity:0.2;animation:shine 4s ease-in-out 3s infinite;}.box .box__ghost .symbol:nth-child(1):before,.box .box__ghost .symbol:nth-child(1):after{content:'';width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;left:0;}.box .box__ghost .symbol:nth-child(1):before{transform:rotate(45deg);}.box .box__ghost .symbol:nth-child(1):after{transform:rotate(-45deg);}.box .box__ghost .symbol:nth-child(2){position:absolute;left:-5px;top:30px;height:18px;width:18px;border:4px solid;border-radius:50%;border-color:#fff;opacity:0.2;animation:shine 4s ease-in-out 1.3s infinite;}.box .box__ghost .symbol:nth-child(3){opacity:0.2;animation:shine 3s ease-in-out 0.5s infinite;}.box .box__ghost .symbol:nth-child(3):before,.box .box__ghost .symbol:nth-child(3):after{content:'';width:12px;height:4px;background:#fff;position:absolute;border-radius:5px;top:5px;left:40px;}.box .box__ghost .symbol:nth-child(3):before{transform:rotate(90deg);}.box .box__ghost .symbol:nth-child(3):after{transform:rotate(180deg);}.box .box__ghost .symbol:nth-child(4){opacity:0.2;animation:shine 6s ease-in-out 1.6s infinite;}.box .box__ghost .symbol:nth-child(4):before,.box .box__ghost .symbol:nth-child(4):after{content:'';width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;top:10px;right:30px;}.box .box__ghost .symbol:nth-child(4):before{transform:rotate(45deg);}.box .box__ghost .symbol:nth-child(4):after{transform:rotate(-45deg);}.box .box__ghost .symbol:nth-child(5){position:absolute;right:5px;top:40px;height:12px;width:12px;border:3px solid;border-radius:50%;border-color:#fff;opacity:0.2;animation:shine 1.7s ease-in-out 7s infinite;}.box .box__ghost .symbol:nth-child(6){opacity:0.2;animation:shine 2s ease-in-out 6s infinite;}.box .box__ghost .symbol:nth-child(6):before,.box .box__ghost .symbol:nth-child(6):after{content:'';width:15px;height:4px;background:#fff;position:absolute;border-radius:5px;bottom:65px;right:-5px;}.box .box__ghost .symbol:nth-child(6):before{transform:rotate(90deg);}.box .box__ghost .symbol:nth-child(6):after{transform:rotate(180deg);}.box .box__ghost .box__ghost-container{background:#fff;width:100px;height:100px;border-radius:100px 100px 0 0;position:relative;margin:0 auto;animation:upndown 3s ease-in-out infinite;}.box .box__ghost .box__ghost-container .box__ghost-eyes{position:absolute;left:50%;top:45%;height:12px;width:70px;}.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-left{width:12px;height:12px;background:#332f63;border-radius:50%;margin:0 10px;position:absolute;left:0;}.box .box__ghost .box__ghost-container .box__ghost-eyes .box__eye-right{width:12px;height:12px;background:#332f63;border-radius:50%;margin:0 10px;position:absolute;right:0;}.box .box__ghost .box__ghost-container .box__ghost-bottom{display:flex;position:absolute;top:100%;left:0;right:0;}.box .box__ghost .box__ghost-container .box__ghost-bottom div{flex-grow:1;position:relative;top:-10px;height:20px;border-radius:100%;background-color:#fff;}.box
        .box__ghost
        .box__ghost-container
        .box__ghost-bottom
        div:nth-child(2n){top:-12px;margin:0 0px;border-top:15px solid #332f63;background:transparent;}.box .box__ghost .box__ghost-shadow{height:20px;box-shadow:0 50px 15px 5px #3b3769;border-radius:50%;margin:0 auto;animation:smallnbig 3s ease-in-out infinite;}@keyframes upndown{0%{transform:translateY(5px);}50%{transform:translateY(15px);}100%{transform:translateY(5px);}}@keyframes smallnbig{0%{width:90px;}50%{width:100px;}100%{width:90px;}}@keyframes shine{0%{opacity:0.2;}25%{opacity:0.1;}50%{opacity:0.2;}100%{opacity:0.2;}}</style>
  </head>
  <body>
    <div class="box">
      <div class="box__ghost">
        <div class="symbol"></div>
        <div class="symbol"></div>
        <div class="symbol"></div>
        <div class="symbol"></div>
        <div class="symbol"></div>
        <div class="symbol"></div>
        <div class="box__ghost-container">
          <div class="box__ghost-eyes">
            <div class="box__eye-left"></div>
            <div class="box__eye-right"></div>
          </div>
          <div class="box__ghost-bottom">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div class="box__ghost-shadow"></div>
      </div>
    </div>
    <script>
      var pageX = document.documentElement.scrollWidth;
      var pageY = document.documentElement.scrollHeight;
      var mouseY = 0;
      var mouseX = 0;
      document.addEventListener('mousemove', function (event) {
        mouseY = event.pageY;
        var yAxis = ((pageY / 2 - mouseY) / pageY) * 300;
        mouseX = event.pageX / -pageX;
        var xAxis = -mouseX * 100 - 100;
        var boxGhostEyes = document.querySelector('.box__ghost-eyes');
        boxGhostEyes.style.transform = `translate(${xAxis}%,${-yAxis}%)`;
      });
    </script>
  </body>
</html>