function getsupportedprop(proparray) { var root = document.documentElement; for (var i = 0; i < proparray.length; i++) { if (proparray[i] in root.style) { return proparray[i]; } } } var boxshadowprop = getsupportedprop(['boxShadow', 'MozBoxShadow', 'WebkitBoxShadow']); var der = document.getElementById("der"); var light = document.getElementById("light"); var cX = der.offsetLeft + der.offsetWidth / 2; var cY = der.offsetTop + der.offsetHeight / 2; var maxD = Math.sqrt(cX * cX + cY * cY); document.onmousemove = getMousePosition; function getMousePosition(mp) { var _x; var _y; _x = event.clientX + document.documentElement.scrollLeft; _y = event.clientY + document.documentElement.scrollTop; light.style.left = _x - light.offsetWidth / 2 + "px"; light.style.top = _y - light.offsetHeight / 2 + "px"; var dX = cX - _x; var dY = cY - _y; var d = Math.sqrt(dX * dX + dY * dY) / maxD * 100 + 10; var l = dX; var t = dY; var shadow = l + "px " + t + "px " + d + "px #888888"; der.style[boxshadowprop] = shadow; }
<div id="der"></div> <div id="light" class="light"></div>
div { background: brown; bottom: 0; height: 100px; left: 0; margin: auto; position: absolute; top: 0; right: 0; width: 100px; box-shadow: 0px 0px 0px #888888; border-radius: 50px; } .light { background: yellow; margin: 0; width: 20px; height: 20px; border-radius: 10px; } * { cursor: none; }