让一个图像占据整个屏幕，然后缩小到适合我放置它的地方

Question

我正在做一个学校项目，我有一个网站，我有一个图像，我使用作为我的导航栏下面的横幅，我想有图像占用整个屏幕时，网站加载，然后缩小到我有它放在我的网站，有人可以指出我在哪里我应该寻找的正确方向?

Answer 1

您可以在CSS中使用缩放和动画功能。看我在这里做了什么:

#banner {
width: 100%;
height: 120px;
background-image: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.freewebheaders.com%2Fwp-content%2Fgallery%2Fcats%2Fcats-header-20738-800x200.jpg&f=1&nofb=1&ipt=8329f05fb294bfb7965b0ee934c2180159e991175ced2d23020b362fe320f4b9&ipo=images);
scale: 5;
animation: scale 2000ms ease-in-out forwards;
}

@keyframes scale {
to {
transform: scale(0.2);
}
}

<div id="nav">
some nav bar stuff
</div>
<div id="banner">
</div>