octocatstartv

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.

            
              @import "nib"

body
html
  height 100%

body
  background #2F2F2F

.pin
  width 30px
  height 30px
  border-radius 50% 50% 50% 0
  background #89849b
  position absolute
  transform rotate(-45deg)
  left 50%
  top 50%
  margin -20px 0 0 -20px
  animation-name bounce
  animation-fill-mode both
  animation-duration 1s
  &:after
    content ''
    width 14px
    height 14px
    margin 8px 0 0 8px
    background #2F2F2F
    position absolute
    border-radius 50%
    
.pulse
  background rgba(0,0,0,0.2)
  border-radius 50%
  height 14px
  width 14px
  position absolute
  left 50%
  top 50%
  margin 11px 0px 0px -12px
  transform rotateX(55deg)
  z-index -2
  &:after
    content ""
    border-radius 50%
    height 40px
    width 40px
    position absolute
    margin -13px 0 0 -13px
    animation pulsate 1s ease-out
    animation-iteration-count infinite
    opacity 0.0
    box-shadow 0 0 1px 2px #89849b
    animation-delay 1.1s

@keyframes pulsate
  0%
    transform scale(0.1, 0.1)
    opacity 0.0
  50%
    opacity 1.0
  100%
    transform scale(1.2, 1.2)
    opacity 0

@keyframes bounce
  0%
    opacity 0
    transform translateY(-2000px) rotate(-45deg)
  60%
    opacity 1
    transform translateY(30px) rotate(-45deg)
  80%
    transform translateY(-10px) rotate(-45deg)
  100%
    transform translateY(0) rotate(-45deg)
            
          
!
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