CSS还是JavaScript？如何改变网站宽度时，浏览器窗口的大小与平滑动画

提问者：小点点

大家好，我正在做一个网站，我有这样一个例子:https://www.olgervandevliet.nl/我希望网站在窗口最大的时候有那些白色条，但是我希望在窗口较小的时候内容占满整个屏幕。就像这个例子。

我尝试了一些:

@media screen and (orientation:landscape) {
  body {
    width: 60%;
  }
}

但是每当我把窗口变小的时候，我的logo和导航栏只是传送到网站的外侧，没有平滑的动画

我能做这件事吗？

共1个答案

匿名用户

首先:移动优先是当今的流行方式。
但无论如何，您可以使用transition:parameter0.3s创建“平滑外观”。

此处示例:https://jsfiddle.net/n081z3st/

观察一下，元素的宽度是如何在1秒内变换的。

希望我能帮上忙:）