/* 创建一个div包裹想要飞入的组件 */
.fly-in-div {
display: flex;
justify-content: center; /*使其在屏幕中央*/
align-items: center;
height: 100vh; /*设置高度为屏幕高度*/
overflow: hidden; /*防止组件飞出屏幕*/
}
/* 编写CSS使组件飞入屏幕 */
.fly-in {
animation: fly-in-animation 0.6s ease-in-out forwards; /*使用CSS动画*/
opacity: 0; /*初始opacity为0*/
}
/* 创建CSS动画 */
@keyframes fly-in-animation {
from {
opacity: 0;
transform: translate3d(0, 100%, 0); /*从下方飞入*/
}
to {
opacity: 1;
transform: translate3d(0, 0, 0); /*结束时回到初始位置*/
}
}

以上是实现依次飞入组件的基础代码。接下来，大家可以将需要的组件放在fly-in-div中，并为它们添加fly-in类。这样，这些组件就会按照顺序依次飞入屏幕。

偶是第一个组件
偶是第二个组件
偶是第三个组件

在以上代码中，有三个组件分别包含在fly-in类中。它们将会以相应的顺序依次飞入屏幕。制作动态的css组件需要掌握很多技巧，大家需要不断的摸索和学习才能做到更好。但只要大家使用好样式，那么动画效果立竿见影，网站也会变得更加生动。