我想用CSS将身体的大小固定在页面首次加载时的初始尺寸

发布于 2025-02-03 02:38:42 字数 671 浏览 4 评论 0原文

我想将车身的大小固定到初始尺寸（首先加载页面时大小以防止在动画大小的元素中对IT进行任何更改）。

我该怎么做？

body {
  height: initial; /* This does not work */
}

也不

body {
   height: 200vh;
}

而且这个编辑这是动画


.small-logo img {  /* This class is toggled in JS*/
    height: 40px;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: shrink 1s ease;
    animation-iteration-count: 1;
}

@keyframes shrink {
    0% {
        height: 100px;
        top: -100px;
        opacity: 10%;
    }
    100% {
        height: 40px;
        top: 0px;
        opacity: 100%;
    }
}

原文

I want to fix the size of the body to the initial size (size when the page first loaded to prevent any changes to the it from elements that resize on animations).

How do i do this?

body {
  height: initial; /* This does not work */
}

and neither does this

body {
   height: 200vh;
}

EDIT -
This is the animation


.small-logo img {  /* This class is toggled in JS*/
    height: 40px;
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: shrink 1s ease;
    animation-iteration-count: 1;
}

@keyframes shrink {
    0% {
        height: 100px;
        top: -100px;
        opacity: 10%;
    }
    100% {
        height: 40px;
        top: 0px;
        opacity: 100%;
    }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦亦如幻 2025-02-10 02:38:42

如果要在初始负载上修复尺寸，这是纯JavaScript解决方案：

document.addEventListener('DOMContentLoaded', function () {
  // find out your body's height and hardcode it programmaticaly:
  var height = document.getElementsByTagName('body')[0].clientHeight;
  document.getElementsByTagName('body')[0].style.height = height +"px"; 
}, false);

因此，执行Intial Domcontentloaded事件后进行操作，然后修复身体高度。

This is pure javascript solution if you want to fix size on initial load:

document.addEventListener('DOMContentLoaded', function () {
  // find out your body's height and hardcode it programmaticaly:
  var height = document.getElementsByTagName('body')[0].clientHeight;
  document.getElementsByTagName('body')[0].style.height = height +"px"; 
}, false);

So, you do it after intial DOMContentLoaded event is executed and then fix body height.

回复收藏 0 原文