cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console