--- title: CSS3 Animationで1日の流れを再現してみた tags: CSS3 author: junya slide: false --- 今回作ったのは ![スクリーンショット 2015-07-31 15.50.29.png](https://qiita-image-store.s3.amazonaws.com/0/20109/d9ebca93-ff85-d348-0c3c-73147486f259.png) ![スクリーンショット 2015-07-31 15.55.32.png](https://qiita-image-store.s3.amazonaws.com/0/20109/626597a3-d7b4-3d26-cb85-c87ac5ca44ea.png) ```html Document
``` ```css *{ margin: 0; padding: 0; box-sizing: border-box; } html,body{ height: 100%; } #world{ height: 100%; display: flex; flex-flow: column-reverse; overflow: hidden; animation: bgColor 24s infinite linear; } #day{ animation: time 24s infinite linear; } #sun{ position: fixed; top: 80px; left: -80px; width: 100px; height: 100px; border-radius: 100%; background: orange; } #moon{ position: fixed; bottom: -80px; right: -100px; width: 100px; height: 100px; border-radius: 100%; background: yellow; } #way{ width: 100%; height: 70px; background: #696969; } #car{ position: relative; bottom: 18px; left: -30px; display: flex; flex-flow: row-reverse; justify-content: flex-end; align-items: baseline; animation: drive 24s infinite linear; } #car #head{ width: 80px; height: 60px; border-radius: 10% 50% 0 0; background: blue; } #car #body{ width: 300px; height: 65px; background: green; } #car #tire{ position: relative; bottom: -20px; left: 40px; width: 35px; height: 35px; border-radius: 100%; background: black; box-shadow: 36px 0 0 0 black, 335px 0 0 0 black; } @keyframes drive{ from{ transform: translateX(0px); } to{ transform: translateX(100%); } } @keyframes time{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } @keyframes bgColor{ 0%{ background: #90D7EC; } 90%{ background: #001E43; } 100%{ background: #90D7EC; } } ```