有这样一个例子。
window.addEventListener('mousemove', e => {
i.style.filter = 'drop-shadow(' + e.clientX / 100 + 'px ' + e.clientY / 100 + 'px 5px rgb(' + e.clientX / 3 + ' ' + e.clientX / 3 + ' ' + e.clientY / 3 + ' ))';
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
background-color: #272727;
}
div#i {
width: 100%;
height: 100%;
filter: drop-shadow(10px 1px 3px red);
background-image: url('https://precisiongrinding.com/wp-content/uploads/2016/12/Global-Map.png');
background-repeat: no-repeat;
background-size: cover;
}
<div id="i"></div>
我怎样才能实现这个例子,使图像的阴影是渐变的?
1 个回答