Created
June 26, 2012 13:25
-
-
Save moebiuseye/2995767 to your computer and use it in GitHub Desktop.
AwesomeFace
This file contains 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
body{ | |
background-color: black; | |
position: fixed; | |
display: table-cell; | |
vertical-align: middle; | |
min-height: 10em; | |
height: 100%; | |
width: 100%; | |
} | |
@keyframes spin{ | |
0%{ transform: scale(1) rotate(0deg) ; box-shadow: 0em 0em 0em white;} | |
10%{ transform: scale(1.2) rotate(20deg) ; box-shadow: 0em 0em 0em white;} | |
20%{ transform: scale(1.5) rotate(45deg) ; box-shadow: 0em 0em 0em white;} | |
30%{ transform: scale(1.9) rotate(75deg) ; box-shadow: 0em 0em 0em white;} | |
40%{ transform: scale(2.4) rotate(110deg) ; box-shadow: 0em 0em 0em white;} | |
50%{ transform: scale(3.0) rotate(150deg) ; box-shadow: 0em 0em 0em white;} | |
60%{ transform: scale(3.7) rotate(180deg) ; box-shadow: 0em 0em 0em white;} | |
70%{ transform: scale(3.7) rotate(240deg) ; box-shadow: 0em 0em 1em white;} | |
80%{ transform: scale(3.7) rotate(360deg) ; box-shadow: 0em 0em 1.5em white;} | |
90%{ transform: scale(3.7) rotate(720deg) ; box-shadow: 0em 0em 3em white;} | |
} | |
@-moz-keyframes spin{ | |
0%{ -moz-transform: scale(1) rotate(0deg) ; box-shadow: 0em 0em 0em white;} | |
10%{ -moz-transform: scale(1.2) rotate(20deg) ; box-shadow: 0em 0em 0em white;} | |
20%{ -moz-transform: scale(1.5) rotate(45deg) ; box-shadow: 0em 0em 0em white;} | |
30%{ -moz-transform: scale(1.9) rotate(75deg) ; box-shadow: 0em 0em 0em white;} | |
40%{ -moz-transform: scale(2.4) rotate(110deg) ; box-shadow: 0em 0em 0em white;} | |
50%{ -moz-transform: scale(3.0) rotate(150deg) ; box-shadow: 0em 0em 0em white;} | |
60%{ -moz-transform: scale(3.7) rotate(180deg) ; box-shadow: 0em 0em 0em white;} | |
70%{ -moz-transform: scale(3.7) rotate(240deg) ; box-shadow: 0em 0em 1em white;} | |
80%{ -moz-transform: scale(3.7) rotate(360deg) ; box-shadow: 0em 0em 1.5em white;} | |
90%{ -moz-transform: scale(3.7) rotate(720deg) ; box-shadow: 0em 0em 3em white;} | |
} | |
@-webkit-keyframes spin{ | |
0%{ -webkit-transform: scale(1) rotate(0deg) ; box-shadow: 0em 0em 0em white;} | |
10%{ -webkit-transform: scale(1.2) rotate(20deg) ; box-shadow: 0em 0em 0em white;} | |
20%{ -webkit-transform: scale(1.5) rotate(45deg) ; box-shadow: 0em 0em 0em white;} | |
30%{ -webkit-transform: scale(1.9) rotate(75deg) ; box-shadow: 0em 0em 0em white;} | |
40%{ -webkit-transform: scale(2.4) rotate(110deg) ; box-shadow: 0em 0em 0em white;} | |
50%{ -webkit-transform: scale(3.0) rotate(150deg) ; box-shadow: 0em 0em 0em white;} | |
60%{ -webkit-transform: scale(3.7) rotate(180deg) ; box-shadow: 0em 0em 0em white;} | |
70%{ -webkit-transform: scale(3.7) rotate(240deg) ; box-shadow: 0em 0em 1em white;} | |
80%{ -webkit-transform: scale(3.7) rotate(360deg) ; box-shadow: 0em 0em 1.5em white;} | |
90%{ -webkit-transform: scale(3.7) rotate(720deg) ; box-shadow: 0em 0em 3em white;} | |
} | |
.ball { | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 25%; | |
width: 3em; | |
border-radius: 1.5em 1.5em 1.5em 1.5em; | |
box-shadow: 0em 0em 0.5em white; | |
animation: spin 1s; | |
-moz-animation: spin 1s; | |
-webkit-animation: spin 0.5s; | |
transform: scale(3.7) rotate(720deg) ; | |
-moz-transform: scale(3.7) rotate(720deg) ; | |
-webkit-transform: scale(3.7) rotate(720deg) ; | |
transform-orgin: 50% 50%; | |
-moz-transform-orgin: 50% 50%; | |
-webkit-transform-orgin: 50% 50%; | |
} | |
This file contains 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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv='Content-Type' content='text/html'; charset='UTF-8' /> | |
<meta name='description' content='Lorem ipsum dolor sit amet'> | |
<meta name='keywords' content='Lorem ipsum dolor sit amet'> | |
<meta name='author' content='moebius_eye'> | |
<meta http-equiv='X-UA-Compatible' content='IE=edge'> | |
<link rel='stylesheet' type='text/css' href='style.css'> | |
<!-- <script src='../first_attempt/ajaxian.js' type='text/javascript'></script> --> | |
<!-- <script src='../first_attempt/index.js' type='text/javascript'></script> --> | |
<title>Moebius_eye's lair</title> | |
</head> | |
<body> | |
<img class='ball' src='http://3.bp.blogspot.com/-xTa7vJfu02c/Tz6VgR0Z5DI/AAAAAAAAA2w/f79ly0221_U/s1600/awesome-face.png' /> | |
<script type='text/javascript'> | |
hashhaschanged(); | |
</script> | |
</body> | |
</html> |
This file contains 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
{"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