css横向滚动条-三大期待已久的 CSS 功能正式上线！

bendan520 css

2023-08-23 0 3,267 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

你好，我是可可。明天css横向滚动条，我将总结并与大家分享 3 个非常正式推出的 CSS 属性。

只是澄清一下：这个功能现在基本上不起作用，即使一些中间浏览器支持它，也只是一个例外。可以期待一下哦~

1.@容器

@container是一种容器查询方法，就像它的名字一样，用于支持根据当前元素所在容器的大小动态变化并添加样式，这与@media根据图层大小不同。

举个例子

首先创建一个侧边栏和一个主要内容

<body>
  <aside class="sidebar">
    <div class="card">
      <h4>侧边栏</h4>
      <p>
        To the world you may be one person, but to one person you may be the world.
      </p>
    </div>
  </aside>
  <main class="content">
    <div class="card">
      <h4>主内容</h4>
      <p>
        To the world you may be one person, but to one person you may be the world.
      </p>
    </div>
  </main>
</body>

让这两个元素垂直布局css横向滚动条，侧边栏的长度为30%，主要内容的长度为70%

body {
  display: flex;
  color: white;
}

h4 {
  color: black;
}

.sidebar {
  width: 30%;
}

.content {
  width: 70%;
  background: #f0f5f9;  /* 给个底色，与侧边栏区分 */
}

.card {
  background: lightpink;
  box-shadow: 3px 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

到目前为止它的工作原理如下：

现在我们发现主要内容的空间很大，所以我们想改变标题和内容文本的布局。这时我们可以使用@container，当当前容器长度小于400px时，直接将主要内容做成垂直布局

@container (min-width: 400px) {
  .content .card {
    display: flex;
  }
}

此时的疗效如下：

不是很酷吗

基于此，我还想到了之前做过的一个不太舒服的需求，那就是字体大小随着容器宽高的变化而动态变化。如果支持这个功能，那么这个需求就很简单了。

二、object-view-box

object-view-box 属性类似于 SVG 中的 viewBox 属性。它允许您使用一行 CSS 平移、缩放、裁剪图像。

让我们在这张照片上动刀吧

添加一行代码

.crop {
  object-view-box: inset(10% 50% 35% 5%);
}

达到的疗效是这样的：

这是它与原始图像的比较：

不仅仅是简单的剪裁，我们还可以基于它实现一些有趣的疗效，比如：

三、动画-时间线

动画时间轴比前两个更有趣！它允许我们根据容器滚动的进度来处理动画。简而言之，页面滚动的百分比就是动画执行的百分比。并且动画还可以根据页面向后滚动来向后播放

.shoes {
  animation-name: Rotate;
  animation-duration: 1s; 
  animation-timeline: scrollTimeline;
}

@scroll-timeline scrollTimeline {
  source: selector('#container');
  orientation: "vertical";
}

@keyframes Rotate {
  from {
    transform: translate(-200px, -200px) rotate(0deg);
  }

  to {
    transform: translate(100vw, 100vh) rotate(720deg);
  }
}