cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .container
  .body
    div(class="eye left")
      .shine
    div(class="eye right")
      .shine
    .mouth
       .mouth-left
       .mouth-right
    .tongue
    .nose
    .mark
  .ear-left
      .inner-ear-left
  .ear-right
      .inner-ear-right
  .balloon-1
    .inner-balloon-1
    .knot-1
    .line-1
  .balloon-2
    .inner-balloon-2
    .knot-2
    .line-2
.prompt Hover me!
            
          
!
            
              @import 'https://fonts.googleapis.com/css?family=Open+Sans:400,800i'

@mixin center
  left: 0
  right: 0
  margin: 0 auto

div
  position: absolute

.prompt
  @include center
  text-align: center
  width: 6em
  padding: 1em
  bottom: 0.5em
  font-family: 'Open Sans', sans-serif
  font-size: calc(1em + 1.5vw)
  font-weight: bold

.container
  top: 0
  bottom: 0
  left: 0
  right: 0 
  margin: auto auto
  width: 24em
  height: 24em
  background: aquamarine
  border-radius: 50%
  border: 1em solid lighten(aquamarine, 10%)
  overflow: hidden
  
.body
  top: 12em
  bottom: 0
  @include center
  width: 14em
  height: 12em
  border-radius: 6.5em 6.5em 5em 5em
  background: #F2F2F2
  z-index: 50

.eye
  top: 4em
  width: 3em
  height: 3em
  background: #2E2E2E
  border-radius: 50%
  z-index: 100
  
.left
  left: 3em
  
.right
  right: 3em
  
.shine
  top: 0.22em
  left: 0.22em
  width: 1.5em
  height: 1.5em
  border-radius: 50%
  background: white
 
.nose
  @include center
  top: 7.5em
  width: 1.9em
  height: 1.1em
  border-radius: 50% 50% 35% 35%
  background: pink
  z-index: 960
  
.mouth
  z-index: 950
  
.mouth-left
  background: #fff
  width: 2.6em
  height: 2em
  border-radius: 50%
  top: 7.8em
  left: 4.7em
  
.mouth-right
  background: #fff
  width: 2.6em
  height: 2em
  border-radius: 50%
  top: 7.8em
  left: 6.7em
  
.ear-left
  background: #F2F2F2
  height: 14em
  width: 4em
  border-radius: 50%
  left: 6em
  top: 1.6em
  transform: rotate(-10deg)
  z-index: 10
  
.inner-ear-left
  @include center
  background: #fff
  height: 10em
  width: 2.6em
  border-radius: 50%
  top: 3em
  
.ear-right
  background: #F2F2F2
  height: 14em
  width: 4em
  border-radius: 50%
  right: 6em
  top: 1.6em
  transform: rotate(10deg)
  z-index: 10
  
.inner-ear-right
  @include center
  background: #fff
  height: 10em
  width: 2.6em
  border-radius: 50%
  top: 3em
  
.mark
  top: 11em
  @include center
  width: 7em
  height: 5em
  border-radius: 50% 50% 0 0
  background: #fff

.tongue
  top: 8.6em
  @include center
  border-radius: 0 0 5em 5em
  width: 2em
  height: 0
  background: pink
  z-index: 900
  transition: height 500ms ease-in-out
 
.container:hover > .body > .tongue
  height: 1.6em
  
.container:hover > .balloon-1
  animation: up 3s ease-in
  
.container:hover > .balloon-2
  animation: up 3s 300ms ease-in

.balloon-1
  background: red
  width: 6.6em
  height: 8em
  left: 2em
  top: 24em
  border-radius: 50%
  z-index: 0
  
.inner-balloon-1
  background: lighten(red, 80%)
  opacity: 0.3
  width: 5.6em
  height: 7em
  left: 0em
  top: 0em
  border-radius: 50%

.knot-1
  background: red
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
  width: 1em
  height: 1em
  top: 7.6em
  @include center
    
.line-1
  width: 1px
  height: 6em
  background: grey
  top: 8.6em
  @include center
    
.balloon-2
  background: blue
  width: 6em
  height: 7.4em
  left: 10em
  top: 24em
  border-radius: 50%
  z-index: 0
  
.inner-balloon-2
  background: lighten(blue, 80%)
  opacity: 0.3
  width: 5em
  height: 6.4em
  left: 0.1em
  top: 0.2em
  border-radius: 50%

.knot-2
  background: blue
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
  width: 1em
  height: 1em
  top: 7.2em
  @include center
    
.line-2
  width: 1px
  height: 6em
  background: grey
  top: 8.2em
  @include center
    
@keyframes up
  to
    top: -14em
  
@media (max-width: 480px)
  body
    font-size: 12px
    
@media (max-width: 320px)
  body
    font-size: 8px
            
          
!
999px
Loading ..................

Console