问题几乎与此相同：如何使用CSS旋转阴影效果？
但我的问题有点复杂：我使用“过滤器：阴影”，因为我想要具有阴影效果的对象是复合的 - 它由两个原始图形组成。
我用 JS达到了预期的效果 - 只需旋转主要对象，然后计算阴影方向。但是阴影在重新渲染时会闪烁，至少在 Chrome 中是可见的。
(function() {
const RAD_TO_DEG = 180/Math.PI,
DEG_TO_RAD = Math.PI/180;
var arrow = document.getElementsByClassName('arrow')[0],
arrow_shadow_color = 'rgba(50,50,50,0.25)',
previous_x = 0,
previous_y = 0,
shadow_angle = -45,
shadow_blur_radius = 5,
shadow_offset = 15,
shadow_string_right = 'px ' + shadow_blur_radius + 'px ' + arrow_shadow_color + ')',
amount_of_attempts_to_skip = 10,
n = 0;
dropShadow(180);
document.addEventListener('mousemove', mouseMove);
function mouseMove(e) {
n++;
if (n%amount_of_attempts_to_skip === 0) {
var angle = Math.atan2( previous_y - e.pageY, e.pageX - previous_x ) * RAD_TO_DEG;
arrow.style.transform = 'rotate(' + (180 - ~~angle) + 'deg)';
dropShadow(angle);
previous_x = e.pageX;
previous_y = e.pageY;
}
}
function dropShadow(angle) {
angle = 180 - shadow_angle + angle;
var x = ( shadow_offset * Math.cos( angle * DEG_TO_RAD) ).toFixed(2),
y = ( shadow_offset * Math.sin( angle * DEG_TO_RAD) ).toFixed(2);
arrow.style.filter = 'drop-shadow(' + x + 'px ' + y + shadow_string_right;
}
})();html, body {
width: 100%;
height: 100%;
box-sizing: border-box;
}
* {
margin: 0;
border: 0;
padding: 0;
position: relative;
box-sizing: inherit;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-100%, -50%);
}
.arrow {
width: 75px;
height: 20px;
background: #2ECC40;
transform-origin: right;
transition: all 0.15s ease;
}
.arrow:before {
content: "";
position: absolute;
border-bottom: 15px solid transparent;
border-right: 20px solid #2ECC40;
border-top: 15px solid transparent;
height: 0px;
width: 0px;
margin-left: -20px;
margin-top: -5px;
}<div class="container"><div class="arrow"></div></div>所以问题是：是否可以用 CSS 为复合对象创建阴影效果，然后旋转它，使其保持与 CSS 的绝对角度？
或者至少可以使用 JS，但可以通过其他方式手动设置 x 和 y 过滤器偏移量。
UPD：我刚刚意识到不需要动态应用阴影样式 - 它可以应用于容器：不会有重新渲染闪烁，不需要应用一些技术来平滑阴影移动，不需要手动计算阴影偏移，就是这样。我回答了我自己的问题，因为这很愚蠢。
我刚刚意识到不需要动态应用阴影样式 - 它可以应用于容器：不会有重新渲染闪烁，不需要应用一些技术来平滑阴影移动，不需要手动计算阴影抵消，就是这样。所有这些都将自动呈现。
那么“是否可以用 CSS 为复合对象创建阴影效果，然后旋转它以使其保持与 CSS 的绝对角度”的答案？是是的，这是可能的：只适用于下拉阴影过滤器，你想有一个阴影效果的元素的容器。
Stackoverflow，抱歉问了一些愚蠢的问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句