纯CSS实现奥运升国旗

这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战

这周休假基本在家看奥运了。外行看个热闹，跳水看水花，体操看落地。奥运健儿们非常棒，期待中国这次奥运会金牌榜第一名！奥运健儿们加油！

8月更文凑个热闹，正好最近在从头学习CSS，尤其看到CSS的动画animation非常有趣，应该可以做很多有意思的动画。

为了给我国奥运健儿们加油，先做一个得奖升旗的动画吧！可惜乒乓球限制了参加人次，估计以后乒乓球不会再有如何08年奥运会一样三个国旗同时升起的情况了。

最终效果

先来看看最终的实现效果，如下图。

动画 (0).gif

实现思路

实现思路是:

首先需要将三个国旗包裹在一个DIV下，然后对DIV实行animation，这样才能保证三个国旗在动画过程中保持相对静止的情况。

<div class="guoqi-div border">
        <img src="./img/guoqi/guoqi/国旗1024.png" class="guoqi silver border"/>
        <img src="./img/guoqi/guoqi/国旗1024.png" class="guoqi gold border"/>
        <img src="./img/guoqi/guoqi/国旗1024.png" class="guoqi copper border"/>
    </div>

如何使国旗升起呢？

因为代码中body使用了flex布局，并元素居中，因此我通过变化国旗的DIV的margin-bottom达到升国旗的效果。

另外，三个国旗的相对高低位置也同样是通过margin-bottom实现的。

实现代码

所用代码非常简单。其中国旗图片是从中华人民共和国中央人民政府官网上下载的。

<!DOCTYPE html>

<body class="center">
    <div class="guoqi-div border">
        <img src="./img/guoqi/guoqi/国旗1024.png" class="guoqi silver border"/>
        <img src="./img/guoqi/guoqi/国旗1024.png" class="guoqi gold border"/>
        <img src="./img/guoqi/guoqi/国旗1024.png" class="guoqi copper border"/>
    </div>
</body>

<style>
    body {
        width: 100vw;
        height: 100vh;
    }
    .center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .border {
        /* border: 1px solid black; */
    }
    
    .guoqi {
        width: 102px;
        height: 68px;
        margin: 10px;
    }

    .silver {
        margin-bottom: 20px;
    }

    .gold {
        margin-bottom: 50px;
    }
    .copper {
        margin-bottom: 10px;
    }
    .guoqi-div {
        animation: up 10s infinite;
    }
    @keyframes up {
        0% {
            margin-bottom: 0;
        }
        100% {
            margin-bottom: 30%;
        }
    }
</style>

</html>

CSS好神奇！