如何在网站打开时实现放大功能

Question

我如何制作代码，如果您打开我的网页然后会发生这种情况：https://www.youtube.com/watch?v=tGsKzZtRwxw 使用 css？

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

Answer 1

您可以尝试 CSS 缩放规则：

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

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

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

Answer 2

我建议当页面完全加载时，将徽标样式设置为动画，该动画以从 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);
}

Answer 3

您可以像下面的代码片段那样做（使用动画）：

Use styles and decoration according to need , this is only a demo.

As known font-size is for text so this animation will work only for text . If you want animation for other stuffs than change accordingly like can use width height higher values or can use transform: scale() property

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>

如何在网站打开时实现放大功能

How to make a zoom in function when the website opens

css

animation

zoom-sdk