css 模仿BootStrap得section data-aos="fade-up"

CSS 中模仿 Bootstrap 的 `data-aos` 功能，Bootstrap 使用的是 AOS (Animate On Scroll) 这样的动画库来添加滚动到元素时的动态效果。如果你想要在 CSS 中实现类似的效果，虽然没有直接的内置属性，你可以手动编写关键帧动画或者利用 JavaScript 来控制。

例如，如果你想创建一个淡入上滑的动画，可以使用 CSS 的 `@keyframes` 规则，并结合 `transition` 属性来模拟。下面是一个简单的例子：

/* 定义关键帧动画 */
@keyframes fade-up {
  0% { opacity: 0; transform: translateY(-100px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 给需要动画的 section 元素应用动画 */
section[data-aos*='fade-up'] {
  animation-name: fade-up;
  animation-duration: 1s; /* 设置动画持续时间 */
  animation-timing-function: ease-in-out; /* 设置平滑的动画速度曲线 */
  visibility: hidden; /* 隐藏元素直到动画开始 */
  position: relative; /* 保持定位以便进行动画 */
  overflow: auto; /* 如果有内容，防止滚动溢出 */
}

/* 当滚动到该元素时启动动画并显示元素 */
section[data-aos*='fade-up'][data-aos-offset] {
  top: calc(100vh - 100px); /* 根据屏幕高度设置触发点 */
  transition: all .5s; /* 添加过渡效果 */
  opacity: 0;
}

section[data-aos*='fade-up'][data-aos-offset]:in-view {
  animation-play-state: running; /* 开始动画 */
  visibility: visible;
}

在这个示例中，当你将 `data-aos="fade-up"` 或者类似的数据属性添加到 `<section>` 元素上，它会在页面滚动到这个元素的时候执行淡入上滑的动画。你可以调整动画的关键帧、速度和其他细节以适应需求。