如何将带旋转动画的头像模块移至信息卡片上方？

当前你的.team-page采用横向flex布局，导致头像与信息卡片并排显示，只需调整以下内容即可实现头像在卡片上方的布局：

核心CSS修改 #

• 将.team-page的flex排列方向改为纵向，同时调整高度与对齐方式，避免内容溢出或排版错乱
• 给头像模块添加底部间距，与下方卡片区拉开距离
• 修复.skills的height:0问题（该属性会导致技能卡片被隐藏）

修改后的完整CSS代码：

.about-img {
    position: relative;
    width: 25rem;
    height: 25rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem; /* 新增：和下方卡片区拉开距离 */
}
.about-img .spin{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(0);
    width: 68%;
    height: 68%;
    border-radius: 50%;
    border-top: .2rem solid var(--main-color);
    border-bottom: .2rem solid var(--main-color);
    border-left: .2rem solid var(--main-color-alt);
    border-right: .2rem solid var(--main-color-alt);
    animation: aboutSpinner 8s linear infinite;
}
.team-page {
    display: flex;
    flex-direction: column; /* 关键修改：横向排列改为纵向排列 */
    position: relative;
    justify-content: flex-start; /* 从垂直居中改为顶部开始，避免内容溢出 */
    align-items: center;
    min-height: 100vh; /* 用min-height替代height，确保内容过长时可滚动 */
    padding: 2rem 5%; /* 增加顶部内边距，避免头像贴顶 */
}
.footer {
    display: flex;
    margin-top: auto;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
}
.about,.skills {
    padding: 40px;
    min-height: 330px;
}
.about {
    background-color: white;
    color: black;
}
.about h3 {
    margin-bottom: 25px;
}
.skills {
    background-color: #3366cc;
    color: #f5f5f5;
    /* 移除height:0，恢复技能卡片显示 */
    min-height: 330px; /* 和.about保持一致的最小高度 */
}
.skills h2 {
    margin-bottom: 20px;
}
.skills .progress {
    margin-bottom: 30px;
}
.about-img .image {
    transition: opacity 1s ease-in-out;
    border-radius: 50%;
    width: 60%;
    border: .2rem solid var(--main-color-alt);
}

/* 补全缺失的旋转动画 */
@keyframes aboutSpinner {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

HTML调整（修复语法错误） #

你的HTML中技能部分的span标签存在语法错误，比如<span class="pull-right"70%></span>需修正为<span class="pull-right">70%</span>，修复后的完整HTML：

<div class="team-page">
    <div class="about-img disable_curet">
        <img class="image" src="imgs/logo.png" alt="头像">
        <span class="spin"></span>
    </div>
    <section class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="about">
                        <h3>Profile</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas temporibus a eveniet odio consequuntur, aspernatur fugit voluptatum laboriosam id unde voluptates modi quos omnis et numquam ipsa doloribus debitis.
                        </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="skills">
                        <h2>Our skills</h2>
                        <strong>PHP MySQL</strong>
                        <span class="pull-right">70%</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-primary" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
                        </div>
                        <strong>UI/UX</strong>
                        <span class="pull-right">85%</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-primary" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;"></div>
                        </div>
                        <strong>Bootstrap</strong>
                        <span class="pull-right">95%</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-primary" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<div class="footer">
    <!-- The Paragraph at the End -->
    <p class="copyright">&copy; 2023 <span title="Science Lab Team | Sands International School">SLT | SIS</span> All right Reserved</p>
</div>

调整说明 #

1. 修改.team-page的flex-direction为column，直接将子元素从横向排列改为纵向排列
2. 用min-height:100vh替代height:100vh，防止内容过长时被截断
3. 给.about-img添加margin-bottom，保证头像与卡片区有合适间距
4. 移除.skills的height:0属性，确保技能卡片正常显示
5. 补全缺失的aboutSpinner动画，让头像旋转效果生效
6. 修正HTML中span标签的语法错误，使百分比文字正常显示

内容的提问来源于stack exchange，提问作者Omar FF