对从一个角到另一个角的对角线进行动画处理
我正在尝试对页面上从一个角到另一个角的对角线进行动画处理。无论屏幕格式如何，该线都应该是对角线。我认为（或者我认为）我必须transform: rotate()在 CSS 中使用。使用 jquery 或 Javascript，我尝试返回并计算给定屏幕格式的线条必须旋转的角度。该论点应该传递给rotate().
我已经用 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>
该代码在屏幕上绘制一条线，但不旋转。如何解决这个问题？
BIG阳1回答
-
Smart猫小萌
您必须将您的代码放在<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>
随时随地看视频慕课网APP
相关分类
Html5