如何在网站打开时进行放大功能答案

【问题标题】：How to make a zoom in function when the website opens如何在网站打开时进行放大功能
【发布时间】：2021-11-21 06:56:45
【问题描述】：

如果您打开我的网页，我该如何编写代码：https://www.youtube.com/watch?v=tGsKzZtRwxw 使用 css？

但我想要的是让徽标首先放大（更快，可能是 5 秒，直到动画结束）以显示徽标，然后当您浏览我的页面时它会转到左上角.这是一个以星球大战为主题的学校项目。

【问题讨论】：

标签： css animation zoom-sdk

【解决方案1】：

您可以在下面的 sn-p 中执行类似操作（使用动画）：

根据需要使用样式和装饰，这只是一个演示。

众所周知，字体大小适用于文本，因此此动画仅适用于文本。如果您想要其他内容的动画而不是相应更改，例如可以使用 width height 更高的值或可以使用 transform: scale() 属性

function zoom() {
  var reed = document.getElementById("demo");
  reed.classList.add("animation");
}

.animation {
  animation: zoomer 5s linear;
}

@keyframes zoomer {
  0% {
    font-size: 300px;
  }
  100% {
    font-size: 30px;
  }
}

.color {
  color: red;
  font-size:30px;
}

<body onload="zoom()">
  <h1 id="demo" class="color">content</h1>
</body>

【讨论】：

【解决方案2】：

你可以试试 CSS 缩放规则：

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>

注意：它只会使页面上的所有内容变大?

【讨论】：

【解决方案3】：

我建议当页面完全加载时，您将徽标样式设置为动画，该动画以从 1 到某物的变换开始，然后移动到顶部 0 左 0（或任何合适的值）。

如果没有看到您的实际代码，很难提供进一步的建议，但类似于：

@keyframes logo {
  0% {
   top: 50%;
   left: 50%;
    transform: scale(1) translate(-50%, -50%);
  }
  50% {
   top: 50%;
   left: 50%;
    transform: scale(2) translate(-50%, -50%);
  } 
  100% {
  top: 0;
  left: 0;
  transform: scale(1) translate(0, 0);
}

【讨论】：