純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