Just some CSS3 Animations to recreate the sky.
A Pen by Montana Flynn on CodePen.
-
-
Save CodeMyUI/e04b6325dcc648fb699ffa4d370d1b0a to your computer and use it in GitHub Desktop.
CSS3 Animated Clouds
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <meta charset='UTF-8'> | |
| <title>CSS3 Cloud Animations By Montana Flynn</title> | |
| </head> | |
| <body> | |
| <div class="sky"> | |
| <div class="moon"></div> | |
| <div class="clouds_one"></div> | |
| <div class="clouds_two"></div> | |
| <div class="clouds_three"></div> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html, body { | |
| margin: 0; | |
| height: 100% | |
| } | |
| .sky { | |
| height: 480px; | |
| background: #007fd5; | |
| position: relative; | |
| overflow: hidden; | |
| -webkit-animation: sky_background 50s ease-out infinite; | |
| -moz-animation: sky_background 50s ease-out infinite; | |
| -o-animation: sky_background 50s ease-out infinite; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0) | |
| } | |
| .moon { | |
| background: url("http://montanaflynn.me/lab/css-clouds/images/moon.png"); | |
| position: absolute; | |
| left: 0; | |
| height: 100%; | |
| width: 300%; | |
| -webkit-animation: moon 50s linear infinite; | |
| -moz-animation: moon 50s linear infinite; | |
| -o-animation: moon 50s linear infinite; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0) | |
| } | |
| .clouds_one { | |
| background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_one.png"); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 300%; | |
| -webkit-animation: cloud_one 50s linear infinite; | |
| -moz-animation: cloud_one 50s linear infinite; | |
| -o-animation: cloud_one 50s linear infinite; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0) | |
| } | |
| .clouds_two { | |
| background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_two.png"); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 300%; | |
| -webkit-animation: cloud_two 75s linear infinite; | |
| -moz-animation: cloud_two 75s linear infinite; | |
| -o-animation: cloud_two 75s linear infinite; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0) | |
| } | |
| .clouds_three { | |
| background: url("http://montanaflynn.me/lab/css-clouds/images/cloud_three.png"); | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| width: 300%; | |
| -webkit-animation: cloud_three 100s linear infinite; | |
| -moz-animation: cloud_three 100s linear infinite; | |
| -o-animation: cloud_three 100s linear infinite; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| -o-transform: translate3d(0, 0, 0) | |
| } | |
| @-webkit-keyframes sky_background { | |
| 0% { | |
| background: #007fd5; | |
| color: #007fd5 | |
| } | |
| 50% { | |
| background: #000; | |
| color: #a3d9ff | |
| } | |
| 100% { | |
| background: #007fd5; | |
| color: #007fd5 | |
| } | |
| } | |
| @-webkit-keyframes moon { | |
| 0% { | |
| opacity: 0; | |
| left: -200% -moz-transform: scale(0.5); | |
| -webkit-transform: scale(0.5); | |
| } | |
| 50% { | |
| opacity: 1; | |
| -moz-transform: scale(1); | |
| left: 0% bottom: 250px; | |
| -webkit-transform: scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| bottom: 500px; | |
| -moz-transform: scale(0.5); | |
| -webkit-transform: scale(0.5); | |
| } | |
| } | |
| @-webkit-keyframes cloud_one { | |
| 0% { | |
| left: 0 | |
| } | |
| 100% { | |
| left: -200% | |
| } | |
| } | |
| @-webkit-keyframes cloud_two { | |
| 0% { | |
| left: 0 | |
| } | |
| 100% { | |
| left: -200% | |
| } | |
| } | |
| @-webkit-keyframes cloud_three { | |
| 0% { | |
| left: 0 | |
| } | |
| 100% { | |
| left: -200% | |
| } | |
| } | |
| @-moz-keyframes sky_background { | |
| 0% { | |
| background: #007fd5; | |
| color: #007fd5 | |
| } | |
| 50% { | |
| background: #000; | |
| color: #a3d9ff | |
| } | |
| 100% { | |
| background: #007fd5; | |
| color: #007fd5 | |
| } | |
| } | |
| @-moz-keyframes moon { | |
| 0% { | |
| opacity: 0; | |
| left: -200% -moz-transform: scale(0.5); | |
| -webkit-transform: scale(0.5); | |
| } | |
| 50% { | |
| opacity: 1; | |
| -moz-transform: scale(1); | |
| left: 0% bottom: 250px; | |
| -webkit-transform: scale(1); | |
| } | |
| 100% { | |
| opacity: 0; | |
| bottom: 500px; | |
| -moz-transform: scale(0.5); | |
| -webkit-transform: scale(0.5); | |
| } | |
| } | |
| @-moz-keyframes cloud_one { | |
| 0% { | |
| left: 0 | |
| } | |
| 100% { | |
| left: -200% | |
| } | |
| } | |
| @-moz-keyframes cloud_two { | |
| 0% { | |
| left: 0 | |
| } | |
| 100% { | |
| left: -200% | |
| } | |
| } | |
| @-moz-keyframes cloud_three { | |
| 0% { | |
| left: 0 | |
| } | |
| 100% { | |
| left: -200% | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment