旋转的SVG光标

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css?family=Dosis:300,400,700");
body {
  font-family: 'Dosis', sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: none;
}
body * {
  cursor: inherit;
}

#cursor {
  position: absolute;
  left: -28px;
  top: -34px;
  will-change: transform;
  -webkit-transform: translate(-999px, -999px);
          transform: translate(-999px, -999px);
  pointer-events: none;
}
#cursor img {
  will-change: transform;
  -webkit-transition: -webkit-transform .1s linear;
  transition: -webkit-transform .1s linear;
  transition: transform .1s linear;
  transition: transform .1s linear, -webkit-transform .1s linear;
}

@-webkit-keyframes color-blink {
  0% {
    color: #eb3424;
  }
  14% {
    color: #f2a03a;
  }
  28% {
    color: #f8fd53;
  }
  42% {
    color: #7bec4b;
  }
  56% {
    color: #74fbe4;
  }
  70% {
    color: #0035f5;
  }
  84% {
    color: #b337f6;
  }
  100% {
    color: #b337f6;
  }
}

@keyframes color-blink {
  0% {
    color: #eb3424;
  }
  14% {
    color: #f2a03a;
  }
  28% {
    color: #f8fd53;
  }
  42% {
    color: #7bec4b;
  }
  56% {
    color: #74fbe4;
  }
  70% {
    color: #0035f5;
  }
  84% {
    color: #b337f6;
  }
  100% {
    color: #b337f6;
  }
}
header {
  text-align: center;
}
header img {
  opacity: .3;
}
header h1 {
  margin-top: 3rem;
  margin-bottom: 0;
}
header a {
  font-weight: 600;
  color: currentcolor;
  text-decoration: none;
}
header a:first-of-type {
  -webkit-animation: 2s infinite alternate color-blink;
          animation: 2s infinite alternate color-blink;
}

JavaScript

'use strict';

// Because of a WebKit-Issue which renders (even SVG) cursors blurry on Retina-Displays I decided to go for a solution which renders the cursor within a custom <div>.

var rotatingCursor = function () {

/* Local Variables */
  var INTERVAL_POSITION = 5;
  var INTERVAL_ROTATION = 100;
  var lastCursorPos = { x: -999, y: -999 };
  var currentCursorPos = { x: -999, y: -999 };
  var lastCursorAngle = 0,
      cursorAngle = 0;
  var cursorEl = undefined,
      cursorImageEl = undefined;

/* Local Functions */

// NOTE: I am transform two different elements here because so I can only animate the rotation with 'transition-property: transform'.
  function setCurrentCursorProps() {
    // Apply translation (set to actual cursor position)
    cursorEl.style.transform = 'translate(' + currentCursorPos.x + 'px, ' + currentCursorPos.y + 'px)';

// Ensure correct rotation transition direction
    while (Math.abs(lastCursorAngle - cursorAngle) > 180) {
      if (cursorAngle > lastCursorAngle) {
        cursorAngle -= 360;
      } else if (cursorAngle < lastCursorAngle) {
        cursorAngle += 360;
      }
    }
    // Apply rotation
    cursorImageEl.style.transform = 'rotate(' + (cursorAngle - 90) + 'deg)';
  }

function updateCursor() {
    window.addEventListener('mousemove', function (event) {
      currentCursorPos = { x: event.clientX, y: event.clientY };
    });

// Interval for updating cursor-position
    setInterval(setCurrentCursorProps, INTERVAL_POSITION);

// Interval for updating cursor-rotation
    setInterval(function () {
      var delt = {
        x: lastCursorPos.x - currentCursorPos.x,
        y: lastCursorPos.y - currentCursorPos.y
      };
      if (Math.abs(delt.x) < 3 && Math.abs(delt.y) < 3) return;
      cursorAngle = Math.atan2(delt.y, delt.x) * 180 / Math.PI;

setCurrentCursorProps();

lastCursorPos = currentCursorPos;
      lastCursorAngle = cursorAngle;
    }, INTERVAL_ROTATION);
  }

/* Public Functions */

return {

'initialize': function initialize() {
      cursorEl = document.querySelector('#cursor');
      cursorImageEl = document.querySelector('#cursor > img');
      updateCursor();
    }

};
}();

document.addEventListener('DOMContentLoaded', rotatingCursor.initialize);

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