css3加载动画2

CSS3是一种用于网页设计的样式表语言，可以帮助开发者创建更加生动、美观的页面效果。其中，加载动画是常见的页面效果之一。

/* 加载动画2 */.loading2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.loading2 div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 5px;
    animation-name: bounce;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
.loading2 div:nth-child(2) {
    animation-delay: 0.2s;
}
.loading2 div:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes bounce {
0% {
    transform: scale(0);
    opacity: 1;
}
50% {
    transform: translateY(20px);
    opacity: 0.5;
}
100% {
    transform: scale(1);
    opacity: 1;
}
}
    

此处的加载动画2是一组由三个小球组成的动画效果。代码实现中，首先定义了一个类名为.loading2的div容器，用于将三个小球排列在一起。接着，通过flex布局使其在容器中水平、垂直居中。三个小球的样式相同，使用了border-radius圆角属性，使其变成一个圆形。动画设置中，使用animation-name、animation-duration、animation-fill-mode、animation-iteration-count等属性指定动画效果、持续时间、填充模式和循环次数。同时，因为三个小球的动画效果略有不同，需要使用animation-delay属性设置动画延迟时间。最后，定义了一个名称为bounce的关键帧，通过位置控制小球的运动过程。

这个动画效果简洁生动，适合在页面loading、数据加载等场景中使用，可以更好地引导用户的注意力。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！