幽灵游标

下载代码

html

css

分享到微信朋友圈

html

css

html,
body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #161616;
  pointer-events: none;
}

.ghost {
  position: absolute;
  z-index: 1;
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 90px;
  margin: 20px 0 0 -45px;
}
.ghost__eyes, .ghost__mouth {
  position: absolute;
  z-index: 1;
  width: 15px;
  height: 15px;
  top: 34px;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  border-radius: 50px;
  background: #161616;
  margin-left: -20px;
  -webkit-transform-origin: center;
          transform-origin: center;
}
.ghost__eyes {
  box-shadow: 40px 0 0 #161616;
}
.ghost__mouth {
  margin: 0;
  top: 60px;
  -webkit-transform: scale(0);
          transform: scale(0);
  border-radius: 20px 20px 12px 12px;
  width: 20px;
  trasform-origin: center bottom;
  overflow: hidden;
}
.ghost__tail {
  position: absolute;
  z-index: -1;
  top: 82px;
  height: 55px;
  width: 100%;
  -webkit-filter: url(#goo);
          filter: url(#goo);
}
.ghost__tail:before {
  content: '';
  background: #fff;
  position: absolute;
  bottom: 35px;
  left: 0;
  height: 100px;
  width: 100%;
  border-radius: 40px 40px 5px 5px;
}
.ghost__rip {
  width: 15px;
  height: 28px;
  background: #fff;
  position: absolute;
  top: 15px;
  left: 0;
  box-shadow: -62px 0 0 #fff, -31px 0 0 #fff, 31px 0 0 #fff, 62px 0 0 #fff, 93px 0 0 #fff;
  border-radius: 50%;
  -webkit-animation: ghost-rips 1.2s linear infinite;
          animation: ghost-rips 1.2s linear infinite;
}

@-webkit-keyframes ghost-rips {
  0% {
    left: 0;
    top: 12px;
  }
  50% {
    left: 31px;
    top: 20px;
  }
  100% {
    left: 62px;
    top: 12px;
  }
}

@keyframes ghost-rips {
  0% {
    left: 0;
    top: 12px;
  }
  50% {
    left: 31px;
    top: 20px;
  }
  100% {
    left: 62px;
    top: 12px;
  }
}

JavaScript

};
['mousemove', 'touchstart', 'touchmove'].forEach(function (e) {
  window.addEventListener(e, getMouse);
});
window.addEventListener('mousedown', function (e) {
  e.preventDefault();
  clicked = true;
});
window.addEventListener('mouseup', function () {
  clicked = false;
});

/*--------------------
    Ghost Follow
    --------------------*/var
GhostFollow = function () {
  function GhostFollow(options) {_classCallCheck(this, GhostFollow);
    Object.assign(this, options);

this.el = document.querySelector('#ghost');
    this.mouth = document.querySelector('.ghost__mouth');
    this.eyes = document.querySelector('.ghost__eyes');
    this.pos = {
      x: 0,
      y: 0 };

}_createClass(GhostFollow, [{ key: 'follow', value: function follow()

{
      this.distX = mouse.x - this.pos.x;
      this.distY = mouse.y - this.pos.y;

this.velX = this.distX / 8;
      this.velY = this.distY / 8;

this.pos.x += this.distX / 10;
      this.pos.y += this.distY / 10;

this.skewX = map(this.velX, 0, 100, 0, -50);
      this.scaleY = map(this.velY, 0, 100, 1, 2.0);
      this.scaleEyeX = map(Math.abs(this.velX), 0, 100, 1, 1.2);
      this.scaleEyeY = map(Math.abs(this.velX * 2), 0, 100, 1, 0.1);
      this.scaleMouth = Math.min(Math.max(map(Math.abs(this.velX * 1.5), 0, 100, 0, 10), map(Math.abs(this.velY * 1.2), 0, 100, 0, 5)), 2);

if (clicked) {
        this.scaleEyeY = .4;
        this.scaleMouth = -this.scaleMouth;
      }

this.el.style.transform = 'translate(' + this.pos.x + 'px, ' + this.pos.y + 'px) scale(.7) skew(' + this.skewX + 'deg) rotate(' + -this.skewX + 'deg) scaleY(' + this.scaleY + ')';
      this.eyes.style.transform = 'translateX(-50%) scale(' + this.scaleEyeX + ',' + this.scaleEyeY + ')';
      this.mouth.style.transform = 'translate(' + (-this.skewX * .5 - 10) + 'px) scale(' + this.scaleMouth + ')';
    } }]);return GhostFollow;}();

/*--------------------
                                  Map
                                  --------------------*/
function map(num, in_min, in_max, out_min, out_max) {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}

/*--------------------
  Init
  --------------------*/
var cursor = new GhostFollow();

/*--------------------
                                Render
                                --------------------*/
var render = function render() {
  requestAnimationFrame(render);
  cursor.follow();
};
render();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg