CSS 教程

<div class="fade-example">
    淡入淡出动画
</div>

<style>
@keyframes fadeInOut {
    0%, 100% {
        opacity: 0; /* 动画开始和结束时元素完全透明 */
    }
    50% {
        opacity: 1; /* 动画中间时元素完全不透明 */
    }
}

.fade-example {
    width: 200px; /* 设置元素宽度为200像素 */
    height: 100px; /* 设置元素高度为100像素 */
    background-color: blue; /* 设置背景颜色为蓝色 */
    color: white; /* 设置文字颜色为白色 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    border-radius: 4px; /* 设置边框圆角为4像素 */
    animation: fadeInOut 3s ease-in-out infinite; /* 应用fadeInOut动画，持续3秒，缓入缓出，无限重复 */
}
</style>

<div class="rotate-example">
    旋转动画
</div>

<style>
@keyframes rotate {
    from {
        transform: rotate(0deg); /* 动画开始时元素旋转0度 */
    }
    to {
        transform: rotate(360deg); /* 动画结束时元素旋转360度 */
    }
}

.rotate-example {
    width: 100px; /* 设置元素宽度为100像素 */
    height: 100px; /* 设置元素高度为100像素 */
    background-color: red; /* 设置背景颜色为红色 */
    color: white; /* 设置文字颜色为白色 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    border-radius: 50%; /* 设置边框圆角为50%，形成圆形 */
    animation: rotate 2s linear infinite; /* 应用rotate动画，持续2秒，线性速度，无限重复 */
}
</style>

<div class="bounce-example">
    弹跳动画
</div>

<style>
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* 这些时间点元素在原始位置 */
    }
    40% {
        transform: translateY(-30px); /* 动画40%时元素向上移动30像素 */
    }
    60% {
        transform: translateY(-15px); /* 动画60%时元素向上移动15像素 */
    }
}

.bounce-example {
    width: 100px; /* 设置元素宽度为100像素 */
    height: 100px; /* 设置元素高度为100像素 */
    background-color: green; /* 设置背景颜色为绿色 */
    color: white; /* 设置文字颜色为白色 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    border-radius: 50%; /* 设置边框圆角为50%，形成圆形 */
    animation: bounce 2s ease-in-out infinite; /* 应用bounce动画，持续2秒，缓入缓出，无限重复 */
}
</style>

<div class="typewriter-example">
    这是一个打字机效果
</div>

<style>
.typewriter-example {
    width: 300px; /* 设置元素宽度为300像素 */
    height: 50px; /* 设置元素高度为50像素 */
    border-right: 2px solid #333; /* 添加右侧边框作为光标 */
    white-space: nowrap; /* 禁止文字换行 */
    overflow: hidden; /* 隐藏超出部分 */
    animation: typing 3s steps(20, end), blink-caret 0.75s step-end infinite; /* 应用typing和blink-caret动画 */
}

@keyframes typing {
    from {
        width: 0; /* 动画开始时元素宽度为0 */
    }
    to {
        width: 300px; /* 动画结束时元素宽度为300像素 */
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent; /* 动画开始和结束时光标透明 */
    }
    50% {
        border-color: #333; /* 动画中间时光标显示 */
    }
}
</style>

<div class="loading-example">
    <div class="spinner"></div>
    加载中...
</div>

<style>
.loading-example {
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 设置元素间距为10像素 */
}

@keyframes spin {
    0% {
        transform: rotate(0deg); /* 动画开始时元素旋转0度 */
    }
    100% {
        transform: rotate(360deg); /* 动画结束时元素旋转360度 */
    }
}

.spinner {
    width: 20px; /* 设置元素宽度为20像素 */
    height: 20px; /* 设置元素高度为20像素 */
    border: 2px solid #f3f3f3; /* 设置边框为2像素实线，颜色为浅灰色 */
    border-top: 2px solid #3498db; /* 设置上边框为2像素实线，颜色为蓝色 */
    border-radius: 50%; /* 设置边框圆角为50%，形成圆形 */
    animation: spin 1s linear infinite; /* 应用spin动画，持续1秒，线性速度，无限重复 */
}
</style>