Skip to content

Instantly share code, notes, and snippets.

@viki53

viki53/dabblet.css

Created May 27, 2013 12:08
Show Gist options
  • Save viki53/5656748 to your computer and use it in GitHub Desktop.
Save viki53/5656748 to your computer and use it in GitHub Desktop.
Download ZIP
Shake ton <body>
Raw
dabblet.css
/* Shake ton <body> */
html{
height: 100%;
background-color: #69c3fb;
background-size: contain;
background-image: radial-gradient(circle closest-side, #ccebfe 0%, #69c3fb 100%);
background-repeat: no-repeat;
}
@keyframes shakeTonBody{
0%{ transform: translate(0, 0); }
38%{ transform: translate(0, 0); }
42%{ transform: translate(-15%, -15%); }
46%{ transform: translate(0, 0); }
50%{ transform: translate(15%, -15%); }
54%{ transform: translate(0, 0); }
58%{ transform: translate(-15%, -15%); }
62%{ transform: translate(0, 0); }
100%{ transform: translate(0, 0); }
}
body{
margin: 10%;
width: 80%;
height: 80%;
background-color: rgba(7,155,248,.3);
animation: shakeTonBody 3s linear infinite alternate;
}
@keyframes shakeTonBodyHover{
0%{ transform: translate(0, 0); }
25%{ transform: translate(0, -2%); }
50%{ transform: translate(0, 0); }
75%{ transform: translate(0, 2%); }
100%{ transform: translate(0, 0); }
}
body:hover{
background-color: rgba(7,155,248,.8);
animation: shakeTonBodyHover .7s linear infinite;
}
#ytplayer{
position: fixed;
right: 0;
bottom: 0;
opacity: .5;
}
#ytplayer:hover{
opacity: 1;
}
Raw
dabblet.html
<iframe id="ytplayer" type="text/html" width="160" height="90"
src="https://www.youtube.com/embed/BvWToRTgKBk?autoplay=1&controls=0&loop=1&modestbranding=1&showinfo=0"
frameborder="0" allowfullscreen>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment