对从一个角到另一个角的对角线进行动画处理

对从一个角到另一个角的对角线进行动画处理

我正在尝试对页面上从一个角到另一个角的对角线进行动画处理。无论屏幕格式如何，该线都应该是对角线。我认为（或者我认为）我必须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阳

浏览 80回答 1

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>

0

0

随时随地看视频慕课网APP

相关分类

Html5