效果图:

完整代码:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>扩展方块加载动画</title>
    <style type="text/css">
        body {
            background: #ECF0F1;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .expanding-boxes {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 60px;
        }
        .expanding-boxes div {
            width: 10px;
            height: 10px;
            background-color: #3498db;
            animation: expand 0.6s infinite alternate;
        }
        .expandin
                


















