动画与过渡 - HTML & CSS 基础

← 返回课程HTML & CSS 基础 › 第 10 关

进度 0%

第 10 关：动画与过渡

HTML/CSS入门

📖 本课目标

本关属于《HTML & CSS 基础》第 10 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

动画与过渡
让网页元素动起来

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 HTML/CSS，浏览器内无法真正执行该语言。当前「运行」输出为演示结果，请在本地环境中编译运行以验证代码。

main.pytest.py

# 动画与过渡
# 让网页元素动起来

def demo_animation():
    print("=== CSS 动画演示 ===\n")
    
    # 模拟加载动画
    import time
    print("加载动画:")
    frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"]
    # 简化展示
    print("  " + " ".join(frames[:5]) + " ...")
    
    # 模拟进度条
    print("\n进度条动画:")
    for i in range(0, 101, 20):
        bar = "█" * (i // 5) + "░" * (20 - i // 5)
        print(f"  [{bar}] {i}%")

demo_animation()

css = """
/* 过渡效果 */
.button {
    background: #667eea;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    transition: all 0.3s ease;  /* 所有属性 0.3 秒过渡 */
}
.button:hover {
    background: #764ba2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 关键帧动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card {
    animation: fadeIn 0.5s ease-out;
}

/* 旋转加载 */
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loader {
    width: 40px;
    height: 40px;
    border: 3px solid #eee;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* 弹跳效果 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}
.bounce {
    animation: bounce 1s ease infinite;
}
"""
print("\n" + css)

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 10 关：动画与过渡

HTML/CSS · 入门 · 《HTML & CSS 基础》

动画与过渡
让网页元素动起来

本关为 HTML/CSS，浏览器无法真正编译运行，请在本地环境验证代码。