多种颜色的鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

css

@import "https://fonts.googleapis.com/css?family=Unkempt";
@-webkit-keyframes droplet {
  50% {
    box-shadow: 0 0 0 3.5em;
    color: transparent;
  }
}
@keyframes droplet {
  50% {
    box-shadow: 0 0 0 3.5em;
    color: transparent;
  }
}
.static {
  position: relative;
  z-index: 1;
}
.static div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: default;
  background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.15) 65%, rgba(255, 255, 255, 0.5) 100%), -webkit-radial-gradient(top left, rgba(255, 255, 255, 0.85) 0%, rgba(0, 0, 0, 0) 75%), -webkit-radial-gradient(30% 30%, rgba(255, 255, 255, 0.2) 10%, rgba(0, 0, 0, 0) 15%), -webkit-radial-gradient(28% 18%, rgba(255, 255, 255, 0.4) 5%, rgba(0, 0, 0, 0) 5%), currentColor;
  background: radial-gradient(top left, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.15) 65%, rgba(255, 255, 255, 0.5) 100%), radial-gradient(top left, rgba(255, 255, 255, 0.85) 0%, rgba(0, 0, 0, 0) 75%), radial-gradient(30% 30%, rgba(255, 255, 255, 0.2) 10%, rgba(0, 0, 0, 0) 15%), radial-gradient(28% 18%, rgba(255, 255, 255, 0.4) 5%, rgba(0, 0, 0, 0) 5%), currentColor;
  font-size: 50%;
  width: 9vmin;
  height: 9vmin;
  margin: 0 2em;
  border-radius: 100%;
  box-shadow: 0 0 0 0.3ch rgba(0, 0, 0, 0.1) inset, 0 0.5em 3em -1em #342342;
  will-change: transform;
}
.static div span {
  pointer-events: none;
  mix-blend-mode: overlay;
  color: #333;
  text-shadow: .1ch .1ch 0 #999;
}
.static div:hover {
  -webkit-animation: jello .7s ease-out;
          animation: jello .7s ease-out;
}

.dynamic {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  font-size: calc(120% + 2.5vmax);
}
.dynamic div {
  pointer-events: none;
  position: absolute;
  padding: 2px;
  border-radius: 1em;
  -webkit-animation: droplet 3.2s alternate ease-out infinite;
          animation: droplet 3.2s alternate ease-out infinite;
  will-change: box-shadow;
  color: inherit;
  background: currentColor !important;
  box-shadow: 0 0;
}

.normal .dynamic div {
  mix-blend-mode: normal;
}

.multiply .dynamic div {
  mix-blend-mode: multiply;
}

.screen .dynamic div {
  mix-blend-mode: screen;
}

.overlay .dynamic div {
  mix-blend-mode: overlay;
}

.darken .dynamic div {
  mix-blend-mode: darken;
}

.lighten .dynamic div {
  mix-blend-mode: lighten;
}

.color-dodge .dynamic div {
  mix-blend-mode: color-dodge;
}

.color-burn .dynamic div {
  mix-blend-mode: color-burn;
}

.hard-light .dynamic div {
  mix-blend-mode: hard-light;
}

.soft-light .dynamic div {
  mix-blend-mode: soft-light;
}

.difference .dynamic div {
  mix-blend-mode: difference;
}

.exclusion .dynamic div {
  mix-blend-mode: exclusion;
}

.hue .dynamic div {
  mix-blend-mode: hue;
}

.saturation .dynamic div {
  mix-blend-mode: saturation;
}

.color .dynamic div {
  mix-blend-mode: color;
}

.luminosity .dynamic div {
  mix-blend-mode: luminosity;
}

.unset .dynamic div {
  mix-blend-mode: unset;
}

main .c1 {
  color: #481459;
}
main .c2 {
  color: #ff703b;
}
main .c3 {
  color: #d2de74;
}
main .c4 {
  color: #0dc7db;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: calc(1em + 1vmin);
  font-family: Helvetica, sans-serif;
  background: #d9d9d3;
}

h1,
h2,
h3,
h4,
footer {
  text-align: center;
  font-weight: 200;
  margin: 1em 0;
  color: #eee;
  text-shadow: 0 0 2em;
  mix-blend-mode: difference;
  font-family: Unkempt, FontAwesome, sans-serif;
}

small {
  display: block;
  font-size: .4em;
  color: #555;
}

.tools {
  mix-blend-mode: unset;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  background: #343439;
  line-height: 1;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: .5em;
  cursor: pointer;
}
.tools > * {
  pointer-events: none;
}
.tools b {
  box-shadow: 0 0.1ch 0 0 rgba(255, 255, 255, 0.35);
  display: inline-block;
  padding: 0 .5ch;
}

.status {
  color: #555;
}

main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 65%;
  padding: 2em;
  margin: 0;
}
footer a {
  color: inherit;
  text-decoration: none;
  color: #777;
}

JavaScript

// TO-DO: make it work with mobile/touch screen
(function() {
  var maxNodes = 100;
  var interval = 80;
  var colors = ['#343439', '#ff703b', '#d2de74', '#0dc7db'];
  var modes = ['normal', 'overlay', 'screen', 'multiply', 'lighten', 'darken', 'color-dodge', 'color-burn', 'soft-light', 'hard-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity', 'unset'];
  var mode = 2;
  var c = 'c' + colors.length;
  var go = false;

var html = document.querySelector('html');
  var body = document.querySelector('body');
  var main = document.querySelector('main.dynamic');
  var modeText = document.querySelector('.tools b');
  var instrux = document.querySelector('h1 small');
  var status = document.querySelector('.status b');

var setMode = function(mode) {
    // mode = mode || modes[Math.round( Math.random() * (modes.length - 1) )];
    var modeName = modes[mode];
    body.classList = modeName;
    modeText.innerText = modeName;
  };

setMode(mode);

var mouseMove = function(e) {
    if (go) {
      var echo = document.createElement('div');
      echo.style.left = e.clientX + 'px';
      echo.style.top = e.clientY + 'px';
      echo.classList = c;
      main.appendChild(echo);

cleanup(maxNodes);
    }
  };

// base throttle fn from: https://codepen.io/SitePoint/pen/RRLVAL
  // added: event propagation
  function throttle(target, fn, wait) {
    var time = Date.now();
    return function() {
      if ((time + wait - Date.now()) < 0) {
        fn(target.event);
        time = Date.now();
      }
    }
  }

var mouseHandler = function(e) {
    var target = e.target;
    if (target.tagName === 'DIV') {
      c = target.classList[0];
      target.style.transformOrigin = Math.round(Math.random() * 100) + '% ' + Math.round(Math.random() * 100) + '%';
    }
  };

var addListenerMulti = function(scope, signatures, fn) {
    var events = signatures.split(' ');
    for (var i = 0, len = events.length; i < len; i++) {
      scope.addEventListener(events[i], fn, false);
    }
  };

addListenerMulti(document, 'mousemove touchstart touchmove', throttle(this, mouseMove, interval));
  addListenerMulti(document, 'click', clickHandler);
  addListenerMulti(document, 'mouseover', mouseHandler);
})();

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