Forked from Cornel Stefanache's Pen qofvL.
A Pen by Captain Anonymous on CodePen.
Created
November 12, 2014 11:40
-
-
Save anonymous/dc9bea07074b2d239a38 to your computer and use it in GitHub Desktop.
A Pen by Captain Anonymous.
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
| <span class="wrapper"> | |
| <span class="p1"></span> | |
| <span class="p2"></span> | |
| <span class="p2 green"></span> | |
| <span class="p3"></span> | |
| <span class="p4"></span> | |
| <span class="bubble b1"></span> | |
| <span class="bubble b2"></span> | |
| <span class="bubble b3"></span> | |
| <span class="bubble b4"></span> | |
| </span> |
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
| html,body { height:100%; margin:0; padding: 20px; background-color: #FFF;} | |
| @substance: #FF69A5; | |
| @glass: lighten(#AFEAFA, 1%); | |
| .wrapper { | |
| position: relative; | |
| display: block; | |
| width: 300px; | |
| height: 300px; | |
| margin:0px auto; | |
| padding-top: 50px; | |
| .p1 { | |
| display: block; | |
| width: 36px; | |
| height: 4px; | |
| border: 1px solid @glass; | |
| border-bottom: 1px solid darken(@glass, 30%); | |
| margin: 0px auto; | |
| border-radius: 5px; | |
| background-color: @glass; | |
| } | |
| .p2 { | |
| display: block; | |
| width: 30px; | |
| height: 30px; | |
| border: 1px solid @glass; | |
| margin: 0px auto; | |
| background-color: @glass; | |
| &.green { | |
| height: 10px; | |
| border: 1px solid @substance; | |
| background-color: @substance; | |
| } | |
| } | |
| .p3 { | |
| display: block; | |
| width: 32px; | |
| margin: 0px auto; | |
| border-left: 50px solid transparent; | |
| border-right: 50px solid transparent; | |
| border-bottom: 90px solid @substance; | |
| } | |
| .p4 { | |
| display: block; | |
| width: 132px; | |
| height: 14px; | |
| border: 1px solid @substance; | |
| background-color: @substance; | |
| margin:-1px auto; | |
| border-radius: 4px 4px 10px 10px; | |
| border-bottom: 2px solid darken(@glass, 30%); | |
| } | |
| @-webkit-keyframes bobby { | |
| 0% { | |
| top: 180px; | |
| width: 2px; | |
| height: 2px; | |
| border-radius: 1px; | |
| border: 1px solid @glass; | |
| background-color: @glass; | |
| opacity: 1; | |
| } | |
| 70% { | |
| top: 82px; | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 7px; | |
| margin-left:-7px; | |
| margin-top: -7px; | |
| border: 1px solid @substance; | |
| opacity: 0.4; | |
| } | |
| 95% { | |
| top: 30px; | |
| width: 14px; | |
| height: 14px; | |
| border-radius: 7px; | |
| margin-left:-7px; | |
| margin-top: -7px; | |
| background-color: @substance; | |
| border: 1px solid darken(@substance, 10%); | |
| opacity: 0.3; | |
| } | |
| 100% { | |
| top: 30px; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 15px; | |
| margin-left:-15px; | |
| margin-top: -15px; | |
| background-color: darken(@substance, 20%); | |
| border: 1px solid darken(@substance, 5%); | |
| opacity: 0.1; | |
| } | |
| } | |
| .bubble { | |
| position: absolute; | |
| top: 150px; | |
| border: 1px solid @substance; | |
| &.b1 { | |
| left: 150px; | |
| -webkit-animation: bobby 1s infinite normal; | |
| } | |
| &.b2 { | |
| left: 142px; | |
| -webkit-animation: bobby 1.3s infinite normal; | |
| } | |
| &.b3 { | |
| left: 145px; | |
| -webkit-animation: bobby 1.7s infinite normal; | |
| } | |
| &.b4 { | |
| left: 147px; | |
| -webkit-animation: bobby 1.5s infinite normal; | |
| } | |
| } | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment