时间戳

首页 > 解决方案 > html 上的转换比例转换仅在鼠标移动时设置动画

javascript - html 上的转换比例转换仅在鼠标移动时设置动画

问题描述

这是我的简单代码，我希望它以 1 秒的延迟（使用 javascript）缩放我的整个文档（html），并且它应该缓慢地动画整个网站的规模。

在这个小提琴中，它根本没有真正工作 - 但在我的文件中它实际上是动画它，但只有当用户不断移动鼠标时。

html { 高度：100%; 宽度：100%；transition：变换15s线性；变换：比例（0.6）

setTimeout(function(){
  document.querySelector("html").style.transform = "scale(0.7)";
},1000)
html {
  height: 100%;
  width:100%;
  transition: transform 15s linear;
  transform: scale(0.6);  background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
 }
<html>
<body></body>
</html>

标签： javascripthtmlcsscss-animations

解决方案

我无法使其与您的代码一起使用，因此我对其进行了如下修改：

<script>
setTimeout(function(){
  document.querySelector("#test").style.transform = "scale(0.7)";
},1000)
</script>

<style>

html {
  height: 100%;
  width:100%;
 }

 #test{
   height: 100%;
   width:100%;
   transition: transform 15s linear;
   transform: scale(0.6);
   background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
 }
 </style>

<html>
<body>
  <div id="test"></div>
</body>
</html>

无论我是否移动鼠标，它似乎都按预期工作。问题是即使放大和缩小或调整大小，backgroundonhtml或标记也会填满屏幕的整个大小。body

编辑：

如果您希望在内容增长时背景适合整个窗口：我刚刚div在您的页面中添加了一个，body以便更轻松地查看正在发生的事情。这是你想要的吗？

setTimeout(function(){
  document.querySelector("html").style.transform = "scale(0.8)";
},1000)
html {
  height: 100%;
  width:100%;
  transition: transform 15s linear;
  transform: scale(0.6);
  background:url("https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png");
}

body{
  height: 100%;
  width:100%;
}

div{
  height: 100%;
  width:100%;
  background-color: #000;
}
<body>
  <div></div>
</body>

推荐阅读