使用css写一个自动升国旗的动画-CSDN博客

本文链接：https://blog.csdn.net/2401_87873725/article/details/142740195

要创建一个自动升国旗的动画，我们可以使用CSS的@keyframes来定义动画，并将其应用于一个表示国旗的元素。以下是一个简单的示例，展示了如何使用CSS来实现这个效果：

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-pole">
        <div class="flag"></div>
    </div>
</body>
</html>

CSS样式和动画 (styles.css 文件)：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.flag-pole {
    width: 5px;
    height: 300px;
    background-color: #888;
    position: relative;
    margin-right: 20px; /* 为国旗留出空间 */
}

.flag {
    width: 100px;
    height: 150px;
    background-color: red; /* 你可以更改为实际的国旗颜色或图片 */
    position: absolute;
    bottom: 0;
    left: 15px; /* 与旗杆保持一定距离 */
    animation: raiseFlag 5s linear forwards; /* 5秒内线性升起国旗 */
}

@keyframes raiseFlag {
    0% {
        transform: translateY(100%); /* 从底部开始 */
    }
    100% {
        transform: translateY(0%); /* 升到顶部 */
    }
}

在这个示例中，.flag-pole 表示旗杆，而 .flag 表示国旗。我们为 .flag 定义了一个名为 raiseFlag 的动画，该动画会在5秒内将国旗从底部线性地升到顶部。你可以根据需要调整动画的持续时间、延迟等属性。此外，你还可以将红色的背景替换为实际的国旗图像或更复杂的颜色组合。