Created
January 9, 2012 17:27
-
-
Save zyadsherif/1584008 to your computer and use it in GitHub Desktop.
night to day in 4s
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
/* night to day in 4s */ | |
/* only tested in Firefox 8 so far but should work in other | |
* browsers as well | |
*/ | |
body { | |
background: black; | |
margin: 100px; | |
transition: all 4s; | |
width: 100px; | |
height: 100px | |
} | |
body:before { | |
position: absolute; | |
font-family: Arial, sans-serif; | |
font-size: 40px; | |
content: "Night"; | |
color: #fff; | |
bottom: 120px; | |
transition: all 3s | |
} | |
div { | |
width: 500px; | |
height: 300px; | |
border-radius: 50%; | |
transition: all 2s; | |
position: relative | |
} | |
div:before { | |
position: absolute; | |
content: ""; | |
width: 30px; | |
height: 30px; | |
border-radius: 50%; | |
left: -20px; | |
top: 130px; | |
box-shadow: 0 0 50px #CC9900; | |
transition: all 2s; | |
background: linear-gradient(center bottom , #fff 22%, #ccc 100%) repeat scroll 0 0 #FFCC33; | |
} | |
html:hover div:before { | |
width: 60px; | |
height: 60px; | |
background: linear-gradient(center bottom , #CC9900 22%, #FFDB70 100%) repeat scroll 0 0 #FFCC33;} | |
html:hover div{transform: rotate(180deg)} | |
html:hover body {background: #6E87CC} | |
html:hover body:before {content: "Day";} |
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
<div></div> |
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
{"view":"split","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment