Skip to content

Instantly share code, notes, and snippets.

@martinkean

martinkean/dabblet.css

Last active July 4, 2016 06:13
Show Gist options
  • Save martinkean/2b877a791d214f6c8a21f2c6c2850bf4 to your computer and use it in GitHub Desktop.
Save martinkean/2b877a791d214f6c8a21f2c6c2850bf4 to your computer and use it in GitHub Desktop.
Download ZIP
Clouds
Raw
dabblet.css
/**
* Clouds
*/
/* These exercises are for teaching purposes only. */
/* With thanks to Val Head and Lynda.com for providing the code and images http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html */
body {background:#678bb3; padding:0; margin:0; }
.sky { width:100%; height:1000px;
background: transparent url(http://martinkean.com/kidscon/clouds/img/sky.jpg) top left no-repeat;
background-size: 100% 100%; margin:auto; position:relative; }
.cloud { width: 250px; height:200px; position:absolute;
background:transparent url(http://martinkean.com/kidscon/clouds/img/front_cloud.png) 0 0 no-repeat; }
.fcloud01 {
top:100px;
z-index:100;
animation-name: drift;
animation-duration: 25s;
animation-timing-function: linear;
animation-iteration-count: infinite; }
@keyframes driftframes {
0% { transform: translateX(20px); animation-timing-function: ease-out; }
60% { transform: translateX(400px); animation-timing-function: ease-in; }
80% { transform: translateX(100px); animation-timing-function: ease-out; }
100% { transform: translateX(0px); animation-timing-function: ease-out; }}
@keyframes cloudmover { from {transform: translateX(-255px);} to {transform: translateX(1350px);}}
Raw
dabblet.html
<!-- Clouds -->
<body>
<div class="sky"> <div class="cloud fcloud01"></div></div>
</body>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment