站长资源
中国站长网站

多种颜色的鼠标跟随效果

多种颜色的鼠标跟随效果

完整代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多种颜色的鼠标跟随效果</title>
<style>
@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;
}
</style>
</head>
<body>
<main class='dynamic'></main>
<h1>
  Inky Autumn Disco
  <small>click anywhere to start the party</small>
</h1>
<main class='static'>
  <div class='c1'>
    <span>#481459</span>
  </div>
  <div class='c2'>
    <span>#ff703b</span>
  </div>
  <div class='c3'>
    <span>#d2de74</span>
  </div>
  <div class='c4'>
    <span>#0dc7db</span>
  </div>
</main>
<h3 class='tools'>
  party blend:
  <b>multiply</b>
</h3>
<h2 class='status'>
  <small>
    droplets:
    <b>0</b>
  </small>
</h2>


<script>
// 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 cleanup = function(max) {
    var sprites = main.querySelectorAll('div');
    sprites = Array.from(sprites);
    if (max === 0) {
      main.innerHTML = '';
      sprites.length = 0;
      // } else {
      //   if(sprites.length > max) {
      //     main.removeChild(main.firstChild);
      //     sprites.length = max;
      //   }
    }
    status.innerText = sprites.length;
  }

  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 clickHandler = function(e) {
    if (e.target.className === 'tools') {
      mode++;
      if (parseInt(mode) > modes.length - 1) {
        mode = 0;
      }
      setMode(mode);
    } else if (e.target.tagName === 'A' || e.target.tagName === 'FOOTER') {
      // do nothing
    } else {
      go = !go;
      instrux.innerHTML = go ? ' recording' : ' playing';
      if (go) {
        cleanup(0);
      }
    }
  };

  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);
})();</script>

</body>
</html>


在线演示  
×

站长资源极速下载通道: 多种颜色的鼠标跟随效果

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 多种颜色的鼠标跟随效果

评论 抢沙发

评论前必须登录!