Animated-CSS3-Logo.markdown

Animated CSS3 Logo

The bars below the logo animate on hover. This is for a music blog I am working on

A Pen by Dan Caccavano on CodePen.

License.

index.haml

.logo
  .logo_text
    Mixtape
  .logo_bars
    .logo_bar.one
    .logo_bar.two
    .logo_bar.three
    .logo_bar.four
    .logo_bar.five
    .logo_bar.six
    .logo_bar.seven
    .logo_bar.eight
    .logo_bar.nine
    .logo_bar.ten

style.sass

@import "compass/css3"
body
  background-image: -webkit-linear-gradient(bottom, #C2C2C2 0%, #262626 100%)
  height: 600px
.logo
  margin: 80px auto
  width: 360px
  zoom: 1
  position: relative
  cursor: pointer
  .logo_text
    position: absolute
    top: -2px
    color: #fff
    font:
      family: arial
      size: 102px
      weight: normal
  .logo_bars
    position: relative
    left: 6px
    top: 98px
    .logo_bar
      @include transition(height 0.5s)
      width: 20px
      height: 60px
      position: absolute
      &.one
        left: 0px
        height: 45px
        background: #F73936
      &.two
        left: 24px
        height: 36px
        background: #ED462D
      &.three
        left: 48px
        height: 60px
        background: #EC5632
      &.four
        left: 72px
        height: 24px
        background: #EE6B37
      &.five
        left: 96px
        height: 12px
        background: #EB8140
      &.six
        left: 120px
        height: 24px
        background: #F29346
      &.seven
        left: 144px
        height: 42px
        background: #F8BE58
      &.eight
        left: 168px
        height: 36px
        background: #EFF76B
      &.nine
        left: 192px
        height: 18px
        background: #BDF366
      &.ten
        left: 216px
        height: 12px
        background: #A1F164
  &:hover
    .logo_bar
      &.one
        height: 30px
      &.two
        height: 18px
      &.three
        height: 24px
      &.four
        height: 42px
      &.five
        height: 18px
      &.six
        height: 24px
      &.seven
        height: 18px
      &.eight
        height: 48px
      &.nine
        height: 54px
      &.ten
        height: 24px