0

我想知道是否可以在窗口调整大小时像这样在不同大小之间为徽标设置动画

因此，当窗口调整为较小的窗口时，徽标会动画为较小的变体，反之亦然。

我对动画并不是很感兴趣，但更多的是关于如何将窗口调整大小与动画结合起来。

我知道有一个 javascript onresize 事件，并且可以使用 javascript 为徽标设置动画。

我不知道在 JS 或 CSS 中制作动画是否最好。

我正在尝试仅使用 html、css 和 javascript 来实现。

4

2 回答 2

0

你想要达到的目标在你的帖子中有点不清楚。要识别不同的窗口调整大小，您可以根据不同设备的分辨率选择以下 css 代码。

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

根据您的帖子，您想为徽标设置动画。为此，将徽标的动画放在 css 分辨率限制之一内。

以下代码取自： https ://www.w3schools.com/css/css_rwd_mediaqueries.asp

如果您想了解有关调整窗口大小的更多信息，请单击上面的链接。

希望这会有所帮助。

于 2020-06-22T20:05:32.743 回答
-1

我想知道是否可以在窗口调整大小时像这样在不同大小之间为徽标设置动画

是的，您可以这样做，并且有几种选择。

我不知道在 JS 或 CSS 中制作动画是否最好

我会说这取决于你的动画。CSS动画通常比 Javascript“轻”，但可能不适用于复杂的动画。另一方面，您有 Javascript 选项，例如Lottie、Motion（和其他），它们可以让您拥有更复杂的动画，并且通常在浏览器和设备之间更兼容。不过，它们将需要您的代码中的额外库。

如何将窗口调整大小与动画结合起来

您可以将 CSS 与媒体查询一起使用（如 Shean 的回答中所述），也可以使用 Javascript调整事件大小（如您所说）。如果您的动画使用 CSS，我建议使用 CSS 媒体查询，如果您的动画使用 Javascript，则建议使用 Javascript 调整事件大小。你可以混合这些，但我认为这不是一个好主意。

这里有 2 个基本示例（一个用于 CSS 动画，另一个用于 JS 动画）：

CSS动画

你可以有这个 HTML 结构：

<body>
  <div class="my-logo">
    My logo here
  </div>
</body>

这个CSS代码：

/* This will show in small screens */
.my-logo {
  // Your CSS animation code here
}

/* This will show in bigger screens */
@media only screen and (min-width: 768px) {
    .my-logo {
      // Your CSS animation code here
    }
}

Javascript 动画

你可以有这个 HTML 结构：

<body>
  <div id="smallLogo">
    My small logo animation here
  </div>
  <div id="bigLogo">
    My big logo animation here
  </div>
</body>

而这个Javascript：

function handleLogoDisplay() {
  if (window.innerWidth < 768) {
    document.getElementById("smallLogo").style.display = "block"
    document.getElementById("bigLogo").style.display = "none"
  } else {
    document.getElementById("smallLogo").style.display = "none"
    document.getElementById("bigLogo").style.display = "block"
  }
}

window.addEventListener('resize', handleLogoDisplay);
于 2020-06-22T21:47:01.787 回答