Created
September 20, 2012 02:11
-
-
Save jvwrx/3753572 to your computer and use it in GitHub Desktop.
Inspired by flash bubble screensaver (no images have been used to make the codepen).
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
.cont | |
.macdisplay | |
.apple | |
.container | |
.bubble | |
.camera | |
.foot |
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
/* | |
=============================================== | |
Pure CSS - animated Bubble and Mac | |
=============================================== | |
Inspired by flash bubble screensaver (no images have been used to make the codepen). | |
=============================================== | |
Created by Azik Samarkandiy | |
07/08/2012 | |
=============================================== | |
*/ |
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
@import "compass" | |
html, body | |
background: #222222 | |
width: 600px | |
height: 100% | |
margin: 0 auto | |
.container | |
background: linear-gradient(45deg, #1d0836, #cc50a3) | |
width: 670px | |
height: 390px | |
margin: -60px 0 0 -100px | |
box-shadow: 0 0 5px black | |
transform: scale(0.7) | |
z-index: 15 | |
.bubble | |
background: rgba(255, 255, 255, 0.1) | |
width: 150px | |
height: 150px | |
border-radius: 50% | |
position: absolute | |
animation: play 7s infinite ease-in | |
box-shadow: 0 0 25px purple inset | |
&:before | |
background: rgba(255, 255, 255, 0.2) | |
content: "" | |
width: 60px | |
height: 28px | |
position: absolute | |
margin: 10px 0 0 25px | |
border-radius: 50% | |
transform: rotate(-20deg) | |
@keyframes play | |
0% | |
box-shadow: 0 0 25px purple inset | |
transform: red translateX(0) translateY(0px) | |
20% | |
box-shadow: 0 0 25px red inset | |
transform: translateX(300px) translateY(243px) | |
30% | |
box-shadow: 0 0 25px pink inset | |
transform: translateX(524px) translateY(140px) | |
40% | |
box-shadow: 0 0 25px violet inset | |
transform: translateX(300px) translateY(0) | |
50% | |
box-shadow: 0 0 25px purple inset | |
transform: translateX(100px) translateY(243px) | |
60% | |
box-shadow: 0 0 25px red inset | |
transform: translateX(0) translateY(180px) | |
70% | |
box-shadow: 0 0 25px pink inset | |
transform: translateX(200px) translateY(0) | |
80% | |
box-shadow: 0 0 25px violet inset | |
transform: translateX(524px) translateY(170px) | |
90% | |
box-shadow: 0 0 25px red inset | |
transform: translateX(300px) translateY(243px) | |
.cont | |
width: 600px | |
margin: -120px 0 0 0 | |
-webkit-transform: scale(0.6) | |
.macdisplay | |
background: #444444 | |
width: 470px | |
height: 270px | |
border: solid 20px black | |
border-radius: 10px 10px 0 0 | |
margin: 94px 0 0 40px | |
z-index: 1 | |
&:before | |
background: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0) 100%) | |
content: "" | |
width: 500px | |
height: 310px | |
border-radius: 10px 10px 0 0 | |
margin: -20px 0 0 -10px | |
position: absolute | |
z-index: 16 | |
&:after | |
background: #dddddd | |
background: linear-gradient(left, #dddddd 0%, #cccccc 24%, #eeeeee 46%, #dddddd 69%, #cccccc 100%) | |
content: "" | |
width: 510px | |
height: 40px | |
position: absolute | |
margin: -41px 0 0 -20px | |
border-radius: 0 0 10px 10px | |
z-index: 3 | |
box-shadow: 0 1px 2px #444444 | |
.camera | |
background: #222222 | |
width: 2px | |
height: 2px | |
position: absolute | |
margin: -300px 0 0 293px | |
border-radius: 3px | |
box-shadow: 0 0 1px white | |
.foot | |
background: #bcbcbc | |
background: linear-gradient(top, #bcbcbc 0%, #eaeaea 22%, #dddddd 40%, #959595 50%, #a0a0a0 62%, #cccccc 70%, #cccccc 100%) | |
width: 170px | |
height: 60px | |
position: absolute | |
margin: 40px 0 0 220px | |
border-radius: 0 0 4px 4px | |
&:before | |
background: #222222 | |
content: "" | |
width: 60px | |
height: 62px | |
position: absolute | |
margin: 0 0 0 -35px | |
border-radius: 0 0 50px 0 | |
&:after | |
background: #222222 | |
content: "" | |
width: 60px | |
height: 62px | |
position: absolute | |
margin: 0 0 0 145px | |
border-radius: 0 0 0 50px | |
.apple | |
background: black | |
width: 208px | |
height: 198px | |
position: absolute | |
margin: 210px 0 0 145px | |
border-radius: 36% 36% 41% 41% / 42% 42% 75% 75% | |
transform: scale(0.1) | |
z-index: 28 | |
&:before | |
background: black | |
content: "" | |
width: 55px | |
height: 55px | |
position: absolute | |
margin: -60px 0 0 90px | |
border-radius: 100px 0 | |
z-index: 29 | |
&:after | |
background: #eeeeee | |
content: "" | |
width: 90px | |
height: 90px | |
position: absolute | |
margin: 28px 0 0 174px | |
border-radius: 50% | |
transform: rotate(-53deg) | |
z-index: 4 | |
box-shadow: 12px -158px 0 #eeeeee, -198px 3px 0 #eeeeee |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment