使用css写一个自动升国旗的动画

要创建一个自动升国旗的动画，我们可以使用CSS的关键帧动画（@keyframes）。以下是一个简单的示例，展示如何使用CSS来制作一个国旗缓缓上升的动画效果：

  1. HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>升国旗动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="flag-container">
        <div class="flag"></div>
    </div>
</body>
</html>
  1. CSS 样式和动画 (styles.css 文件)：
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.flag-container {
    width: 50px; /* 国旗的宽度 */
    height: 300px; /* 国旗上升的总高度 */
    position: relative;
    overflow: hidden; /* 隐藏超出容器部分 */
    background-color: #888; /* 旗杆颜色 */
    margin: 0 auto;
}

.flag {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, red, yellow); /* 国旗颜色渐变，这里以红白为例 */
    position: absolute;
    bottom: -100%; /* 初始位置在容器下方 */
    animation: raiseFlag 5s linear forwards; /* 动画效果 */
}

@keyframes raiseFlag {
    0% {
        bottom: -100%; /* 动画开始时，国旗在容器下方 */
    }
    100% {
        bottom: 0%; /* 动画结束时，国旗升至容器顶部 */
    }
}

这个示例中，我们创建了一个包含国旗的容器（.flag-container），并给国旗（.flag）添加了一个从底部上升到顶部的动画效果。你可以根据需要调整国旗的尺寸、颜色和动画时长等参数。

posted @ 2025-01-12 09:20  王铁柱6  阅读(87)  评论(0)    收藏  举报