Dog : Pure CSS

Dog : Pure CSS.markdown

Dog : Pure CSS

This is Pure CSS Dog.

Inspired by : https://dribbble.com/shots/2167068-Man-s-best-friend

A Pen by Narendra N Shetty on CodePen.

License.

index.html

<div class="dog">
  <div class="ears"></div>
  
  <div class="body">
    <div class="eyes"></div>
    <div class="beard">
      <div class="mouth">
        <div class="tongue"></div>
      </div>
    </div>
    <div class="belt">
      <div class="locket"></div>
      <div class="dot dot1"></div>
      <div class="dot dot2"></div>
      <div class="dot dot3"></div>
      <div class="dot dot4"></div>
      <div class="tag"></div>
    </div>
    <div class="stomach">
    </div>
    <div class="legs">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
  <div class="tail">
  </div>
</div>

style.css

html, body {
  background: #1D4569;
  height: 100%;
  width: 100%;
}

.dog {
  width: 120px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.body {
  background: #60C8E7;
  border-radius: 300px 300px 0 0;
  height: 300px;
}

.beard {
  width: 55px;
  height: 65px;
  background: #087BA5;
  margin: 0 auto;
  border-radius: 20px;
  position: relative;
  &:after {
    content: '';
    background: #087BA5;
    width: 26px;
    height: 13px;
    border-radius: 0 0 25px 25px;
    display: block;
    margin: 0 auto;
    transform: translateY(64px);
  }
  &:before {
    content: '';
    background: #000;
    width: 20px;
    height: 10px;
    border-radius: 0 0 20px 20px;
    display: block;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

.mouth {
  background: #1A243C;
  width: 30px;
  height: 15px;
  border-radius: 0 0 30px 30px;
  position: absolute;
  top: 22px;
  margin: auto;
  left: 0;
  right: 0;
  border-top: 3px solid #fff;
  box-sizing: border-box;
  .tongue {
    width: 20px;
    height: 30px;
    border-radius: 5px 5px 10px 10px;
    background: #FF6B5A;
    margin: 0 auto;
    position: relative;
    top: 4px;
    transition: 300ms;
    animation: grow .1s infinite alternate;
  }
}

.eyes {
  background: #fff;
  width: 20px;
  height: 24px;
  border-radius: 20px 20px 0 0;
  display: block;
  margin: 0 auto;
  position: relative;
  top: 2px;
  &:before, &:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #000;
    display: block;
    border-radius: 50%;
    top: 50%;
    position: absolute;
    animation: squeeze 1.2s infinite;
  }
  &:before {
    left: -13px;
  }
  &:after {
    right: -13px;
  }
}

.belt {
  height: 30px;
  background: #FF6B5A;
  margin-top: 20px;
  position: relative;
  .locket {
    width: 30px;
    height: 30px;
    background: #FFC442;
    margin: 0 auto;
    border-radius: 50%;
    transform: translateY(50%);
  }
  .dot {
    width: 10px;
    height: 10px;
    background: #fff;
    position: absolute;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
    &.dot1 {
      margin-left: 10px;
    }
    &.dot2 {
      margin-left: 34px;
    }
    &.dot3 {
      margin-left: 77px;
    }
    &.dot4 {
      margin-left: 100px;
    }
  }
  &:before, &:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 10px;
    background: #fff;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  &:before {
    left: -5px;
    border-radius: 10px 0 0 10px;
  }
  &:after {
    right: -5px;
    border-radius: 0 10px 10px 0;
  }
}

.stomach {
  width: 56px;
  height: 130px;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 120px 120px 0 0;
}

.legs {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 12px;
  &:before, &:after {
    height: 12px;
    border-radius: 20px 20px 0 0;
    display: inline-block;
    content: '';
    position: absolute;
    background: #087BA5;
    width: 45px;
  }
  &:before {
    left: -37px;
  }
  &:after {
    right: -37px;
  }
  .left, .right {
    display: inline;
    width: 12px;
    height: 55px;
    background: #087BA5;
    position: absolute;
    bottom: 0;
    &:before {
      content: '';
      width: 28px;
      height: 12px;
      background: #60C8E7;
      border-radius: 20px 20px 0 0;
      display: inline-block;
      bottom: 0;
      position: absolute;
    }
  }
  .left {
    left: -12px;
    border-radius: 20px 0 0 0;
    &:before {
      transform: translateX(-1px);
    }
  }
  .right {
    right: -12px;
    border-radius: 0 20px 0 0;
    z-index: 1;
    &:before {
      transform: translateX(-13px); 
    }
  }
}

.ears {
  position: absolute;
  z-index: -1;
  top: -20px;
  &:after, &:before {
    content: '';
    display: inline-block;
    background: #087BA5;
    width: 40px;
    height: 90px;
    border-radius: 100% 100% 0 0;
  }
  &:after {
    transform: translateX(40px);
    border: 10px solid #60C8E7;
    box-sizing: border-box;
  }
}

.tail {
  background: #60C8E7;
  width: 14px;
  height: 80px;
  position: absolute;
  z-index: -1;
  right: 10px;
  bottom: 40px;
  transform: rotate(30deg);
  border-radius: 14px;
  transform-origin: bottom;
  transition: 300ms;
  animation: shake .08s infinite alternate;
}

.tag {
  border-left: 5px solid #FF6B5A;
  border-bottom: 5px solid #FF6B5A;
  width: 500%;
  height: 161px;
  z-index: 2;
  position: absolute;
  top: 30px;
  left: 100px;
  box-sizing: border-box;
  border-bottom-left-radius: 40px;
}

@keyframes squeeze {
  90% {
    transform: none;
    animation-timing-function: ease-in;
  }
  93% {
    transform: scale(1.2, 0.3);
  }
  100% {
    animation-timing-function: ease-out;
  }
}

@keyframes grow {
  0% {
    animation-timing-function: ease-in;
  }
  100% {
    height: 35px;
  }
}

@keyframes shake {
  0% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(40deg);
  }
}