纯CSS实现奥运升国旗

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

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

8月更文凑个热闹，正好最近在从头学习CSS，尤为看到CSS的动画animation很是有趣，应该能够作不少有意思的动画。markdown

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

最终效果

先来看看最终的实现效果，以下图。布局

实现思路

实现思路是:post

首先须要将三个国旗包裹在一个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实现的。flex

实现代码

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

<!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好神奇！spa