cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

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.

            
              body
  .drawing-box
    .taco
      .arm.lefty
      .arm.righty 
      .eye.lft
      .eye.rght
      .cheek.lt
      .cheek.rt
      .mouth
        .stache-box
          .moustache
      .filling  
        .tomatoe
        .guac
        .cheese.animated
    .leg.right
    .leg.left    
      
    
            
          
!
            
              $background: #590C5B
$taco: #FEE07C
$taco-dark: #E8C34C
$black: #383838
$pink: #F786AA
$mouth: #E8999A
$guac: #82D173
$tomatoe: #A7383E
$tomatoe-lg: #DA5552
$cheese: #FCFC62


.drawing-box, .taco, .leg, .eye, .mouth, .moustache, .arm, .filling, .tomatoe, .guac, .cheese.animated, .cheek, .stache-box
  position: absolute
  
body
  background: $background
  
.drawing-box
  width: 400px
  height: 400px
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto
  .leg
    height: 120px
    width: 10px
    // border: 6px solid
    background: linear-gradient(to bottom, $taco 0%, $taco 40%, white 40%, white 50%, red 50%, red 53%, white 53%, white 56%, red 56%, red 59%, white 59%, white 100%)
    z-index: 10
    bottom: 25px
    &::before
      content: ''
      position: absolute
      width: 40px
      height: 20px
      background: white
      border-radius: 20px 20px 0 0
      bottom: 0  
  .leg.left
    left: calc(50% - 40px)
    animation: tap 5s linear
  .leg.right
    right: calc(50% - 40px)
  .taco
    width: 350px
    height: 175px
    border-radius: 175px 175px 0 0 
    background: $taco
    left: 25px
    top: calc(50% - 120px)
    z-indez: 10
    animation: bounce 5s linear infinite
    .eye
      width: 25px
      height: 25px
      background: $black
      bottom: 40%
      border-radius: 50%
      animation: blink 2.4s ease-in-out infinite
    .eye.lft  
      left: 37%
    .eye.rght
      right: 37%
    .cheek
      width: 32px
      height: 32px
      background: $pink
      bottom: 25%
      border-radius: 50%
      opacity: 0.6
    .cheek.lt
      left: 27%
    .cheek.rt
      right: 27%
    .mouth
      width: 35px
      height: 35px
      bottom: 0
      border-radius: 50%
      background-image: linear-gradient(to bottom, white 0%, white 50%, $mouth 50%, $mouth 100%)
      left: calc(50% - 17px)
      bottom: 10%
      .stache-box
        width: 35px
        height: 35px
        animation: wiggle 5s ease-in-out infinite
        transform: rotate(0deg)
        .moustache
          width: 45px
          height: 25px
          background: $black
          left: -22px
          bottom: 18px
          border-radius: 25px 5px 25px 5px 
          transform: rotate(-20deg)
          &::before
            content: ''
            position: absolute
            width: 45px
            height: 25px
            background: $black
            left: 30px
            top: 10px
            border-radius: 5px 25px 5px 25px
            transform: rotate(40deg)
    .arm
      width: 120px
      border: 3px solid $taco
      top: 105px
    .arm.lefty
      left: -80px
      transform: rotate(30deg)
      animation: left-hand 5s linear infinite
    .arm.righty
      right: -80px
      transform: rotate(-30deg)
      animation: right-hand 5s linear infinite
    .filling
      width: 350px
      height: 175px
      border-radius: 175px 175px 0 0 
      background: $taco-dark
      z-index: -1
      left: -26px
      .guac
        width: 330px
        height: 165px
        border-radius: 165px 165px 0 0
        bottom: 5px
        background: $guac
        left: 10px
        &::before, &::after
          content: ''
          position: absolute
        &::before
          width: 100px
          height: 80px
          background: $guac
          border-radius: 50%
          bottom: 20px
        &::after
          width: 120px
          height: 100px
          background: $guac
          border-radius: 50%
          bottom: 70px
          left: 55px
      .tomatoe
        width: 60px
        height: 60px
        background: $tomatoe-lg
        border-radius: 50%
        top: 44px
        left: 30px
        z-index: 1
        &::before, &::after
          content: ''
          position: absolute
          width: 40px
          height: 40px
          background: $tomatoe-lg
          border-radius: 50%
        &::before
          top: 85px
          right: 40px
        &::after
          top: -50px
          left: 95px
@keyframes blink
  0%
    height: 25px
  10%
    height: 10px
    margin-bottom: 5px
  20%
    height: 25px
    margin-bottom: 0
  100%
    height: 25px
@keyframes wiggle
  0%
    transform: rotate(0deg)
  9%
    transform: rotate(0deg)
  11%
    transform: rotate(-7deg)
  13%
    transform: rotate(0deg)
  15%
    transform: rotate(7deg)
  17%
    transform: rotate(0deg)
  19%
    transform: rotate(-7deg)
  21%
    transform: rotate(0deg)
  23%
    transform: rotate(7deg)
  25%
    transform: rotate(0deg)
  100%
    transform: rotate(0deg)
@keyframes bounce
  0%
    top: calc(50% - 120px)
  50%
    top: calc(50% - 120px)
  57%
    top: calc(50% - 100px)
  58%
    top: calc(50% - 120px)
  65%
    top: calc(50% - 100px)
  66%
    top: calc(50% - 120px)
  73%
    top: calc(50% - 100px)
  74%
    top: calc(50% - 120px)
  100%
    top: calc(50% - 120px)
@keyframes right-hand
  0%
    transform: rotate(-30deg)
  50%
    transform: rotate(-30deg)
    top: 105px
  57%
    top: 125px
    transform: rotate(30deg)
  58%
    top: 105px
    transform: rotate(-30deg)
  65%
    top: 125px
    transform: rotate(30deg)
  66%
    top: 105px
    transform: rotate(-30deg)
  73%
    top: 125px
    transform: rotate(30deg)
  74%
    top: 105px
    transform: rotate(-30deg)
  100%
@keyframes left-hand 
  0%
    transform: rotate(30deg)
  50%
    transform: rotate(30deg)
    top: 105px
  57%
    top: 125px
    transform: rotate(-30deg)
  58%
    top: 105px
    transform: rotate(30deg)
  65%
    top: 125px
    transform: rotate(-30deg)
  66%
    top: 105px
    transform: rotate(30deg)
  73%
    top: 125px
    transform: rotate(-30deg)
  74%
    top: 105px
    transform: rotate(30deg)
  100%

  
   
    

        
        
        
        

      
      
      
        
        
      
        
      
      
    


      


  
            
          
!
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