请不要使用 jQuery 和 SCCS(即使我在这里使用 UIkit3 进行样式设置)。导航栏有一个倾斜的背景图像,这是通过 CSS 中的线性渐变和固定高度完成的。我的方法是使用 transform: skewY 并在调整大小时更改 Angular 值。 我可以在控制台中看到值发生变化,但它似乎不会影响站点。
window.onresize = function(event) {
w = window.innerWidth;
h = 140;
document.getElementById('Rhombus').style.transform="skewY('-Math.atan(h/w)*180/Math.PI )+'deg)";
alpha = Math.atan(h/w)*180/Math.PI;
console.log(w, h, -alpha);
};
下面的容器 #Rhombus 也应该使用与标题相同的 Angular 。
最佳答案
我实际上通过使用 CSS 变量并在 JS 中更新它们找到了解决方案:
window.onresize = function(event) {
root = document.documentElement;
w = window.innerWidth;
h = 140;
alpha = Math.atan(h/w)*180/Math.PI;
document.getElementById('Rhombus').style.transform="skewY(`${-alpha}deg`)";
console.log(w, h, -alpha);
root.style.setProperty('--atan', -alpha + "deg");
root.style.setProperty('--tan', alpha + "deg");
};
关于javascript - 在调整窗口大小时更改 skewY Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57125589/