站长资源
完整代码：
<!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>
评论前必须登录！
注册