css 页面加载动画 |vue css引入图片

.loader {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loader img {
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

上面的代码是一个CSS页面加载动画的示例，它使用了CSS3动画的特性。首先，大家需要创建一个容器，让动画居中显示。该容器使用了Flex布局，将内容在水平和垂直方向上居中。接着，在容器中创建一个图片元素，在它的样式中定义一个旋转动画。

通过这种简单的CSS动画，页面加载时会出现一个旋转的小图标，让用户知道页面正在加载中。你可以使用各种颜色、形状和材质的动画，以满足不同场景和需求。

但是需要注意的是，过度复杂的动画可能会导致加载时间更长，并使用户产生焦虑。因此，在选择和设计加载动画时，应该考虑用户的感受并保证页面的性能。