我正在嘗試對(duì)頁面上從一個(gè)角到另一個(gè)角的對(duì)角線進(jìn)行動(dòng)畫處理。無論屏幕格式如何，該線都應(yīng)該是對(duì)角線。我認(rèn)為（或者我認(rèn)為）我必須transform: rotate()在 CSS 中使用。使用 jquery 或 Javascript，我嘗試返回并計(jì)算給定屏幕格式的線條必須旋轉(zhuǎn)的角度。該論點(diǎn)應(yīng)該傳遞給rotate().我已經(jīng)用 jQuery 和 Javascript 嘗試過以下操作：<script> $('#move').css('transform', 'rotate(-' + Math.atan2($(window).width(), $(window).height()) + 'rad)').show();</script>或者<script> document.querySelector('#move').style.transform = Math.atan2($(window).width(), $(window).height())+'rad';</script>使用 CSS 和 HTML：<style> #move { width: 0; height: 4px; background: red; position: relative; animation: mymove 3s; animation-fill-mode: forwards; transform-origin: top left;} @keyframes mymove { from {top: 0; transform: rotate(0deg);} to {width:100%; background-color: blue;} }</style><body><div id="move"></div></body>該代碼在屏幕上繪制一條線，但不旋轉(zhuǎn)。如何解決這個(gè)問題？
1 回答
Smart貓小萌
TA貢獻(xiàn)1911條經(jīng)驗(yàn) 獲得超7個(gè)贊
您必須將您的代碼放在<script>的最底部<body>，以便代碼在您的 DOM 加載后起作用。
const move = document.querySelector('#move')
const angle = Math.atan2(document.documentElement.clientHeight, document.documentElement.clientWidth);
const width = document.documentElement.clientWidth / Math.cos(angle);
move.style.setProperty('--a', angle + 'rad');
move.style.setProperty('--w', width + 'px');
html, body, #move {margin:0; padding:0}
#move {
width: 0;
height: 4px;
background: red;
position: relative;
animation: mymove 3s;
animation-fill-mode: forwards;
transform: rotate(var(--a));
transform-origin: top left;
}
@keyframes mymove {
to {
width: var(--w);
background-color: blue;
}
}
<div id="move"></div>
- 1 回答
- 0 關(guān)注
- 111 瀏覽
添加回答
舉報(bào)
0/150
提交
取消