Give Love ❤

give-love.markdown

Give Love ❤

A Pen by Luciano Felix on CodePen.

License.

index.pug

figure#give-love
  .hole
    .platform
    
  .platform-wrap
    .hearth
      .left-side
      .right-side
    .hearth-shadow

style.sass

$time: 8s

body
  min-height: 100vh
  background: #EEE
  display: flex
  justify-content: center
  align-items: center
  
*
  flex: 0 0 auto
  
#give-love
  width: 250px
  height: 150px
  margin-top: 150px
  
.hole
  width: 100%
  height: 100%
  background-color: #DDD
  border: 1px solid #EEE
  border-radius: 50%
  overflow: hidden
  
.platform
  width: 100%
  height: 100%
  margin: 0px
  border-radius: 50%
  animation: platform $time infinite
  
  @keyframes platform
    from, 20%, 60%, to
      background: #EEE
      transform: translateY(0)
    40%
      background-color: #888
      transform: translateY(150%)

.platform-wrap
  width: 250px
  height: 300px
  margin: -302px 0 0 2px
  border-bottom-right-radius: 125px 75px
  border-bottom-left-radius: 125px 75px
  display: flex
  flex-direction: column
  justify-content: flex-end
  align-items: center
  position: relative
  overflow: hidden
  animation: platform-wrap $time infinite
  
  @keyframes platform-wrap
    from, 80%
      opacity: 1
    to
      opacity: 0
    
.hearth
  width: 150px
  height: 150px
  margin-bottom: 50px
  transform: rotate(-45deg)
  animation: hearth 1s ease-in-out infinite alternate
  
  @keyframes hearth
    to
      margin-bottom: 75px
  
  .left-side, .right-side
    background-color: #F43
  
  .left-side
    width: 100px
    height: 150px
    border-radius: 50px 50px 0 10px
  
  .right-side
    width: 150px
    height: 100px
    margin-top: -100px
    border-radius: 0 50px 50px 10px
    
.hearth-shadow
  width: 150px
  height: 25px
  background: #CCC
  border-radius: 50%
  animation: hearth-shadow $time infinite
  
  @keyframes hearth-shadow
    from, 40%
      margin-bottom: -250px
    60%, to
      margin-bottom: 50px