Анимированный Санта Клаус для сайта на CSS и HTML

Это изображение Санты станет отличным визуальным украшением для вашего сайта. Это очень простой элемент, но выглядит великолепно. Он также имеет простую плавную анимацию. Когда наводишь курсор на усы Санты Клауса – они двигаются. Санта моргает, когда вы наводите курсор на его глаза. Это небольшой элемент, но в нем есть некоторое взаимодействие и посетителям оно наверняка понравится.

HTML

<div class="wrapper">
  <div class="face">
    <div class="hat-wrapper">
      <div class="hat">
        <div class="hat-top">
        </div>
      </div>
      <div class="hat-brim">

      </div>
    </div>
    <div class="eyes">
      <div class="eye left-eye">

      </div>
      <div class="eye right-eye">

      </div>
    </div>
    <div class="mouth">

    </div>
    <div class="beard">
      <div class="mustache">
        <div class="mustache-left">

        </div>
        <div class="mustache-right">

        </div>
      </div>
    </div>
  </div>
</div>

CSS

@keyframes mustache-wiggle {
  0% {
    transform: rotate(0turn);
  }
  25% {
    transform: rotate(0.02turn) scale(1.1);
  }
  50% {
    transform: rotate(-0.02turn) scale(1.1);
  }
  75% {
    transform: rotate(0.02turn) scale(1.1);
  }
  100% {
    transform: rotate(0turn) scale(1);
  }
}
html {
  background: radial-gradient(ellipse at center, #9e9e9e 0%, #d2d2d2 100%)
    no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
html,
body {
  margin: 0;
  padding: 0;
}
.wrapper {
  margin: 30vh 0;
}
.hat-wrapper {
  position: absolute;
  top: -170px;
}
.hat {
  min-width: 400px;
  height: 200px;
  background: #d00000;
  margin: 0 auto;
  border-radius: 100% 100% 0 0;
  transform: skew(0, -8deg);
}
.hat-top {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 123px 0 0 100px;
  border-color: transparent transparent transparent #d00000;
  position: absolute;
  right: -84px;
  bottom: -12px;
  transform: skew(0, 30deg);
}

.hat-top:before {
  content: "";
  display: block;
  background: white;
  background: radial-gradient(at top, #ffffff 0%, #e4e4e4 100%);
  width: 100px;
  height: 100px;
  position: relative;
  top: -50px;
  margin-left: -50px;
  border-radius: 100%;
  transform: skew(0, -23deg);
}
.hat-brim {
  width: 110%;
  min-width: 400px;
  height: 80px;
  border-radius: 40px;
  background: white;
  background: radial-gradient(at top, #ffffff 0%, #e4e4e4 100%);
  margin: 0 auto;
  position: relative;
  left: -5%;
  top: -40px;
}
.face {
  /*Auto width and height needs help*/
  width: 40vw;
  min-width: 400px;
  min-height: 400px;
  max-width: 400px;
  border-radius: 30% 30% 90% 90%;
  background: radial-gradient(at 40% top, #f6e6b4 0%, #eaab5d 100%);
  margin: 0 auto;
  position: relative;
}
.eye {
  background: black;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 100px;
  border-radius: 100%;
  transition: all 0.5s;
}
.eye:hover {
  height: 6px;
  margin-top: 12px;
}
.left-eye {
  left: 100px;
}
.right-eye {
  right: 100px;
}

/*******************
      Beard
*******************/
.beard {
  width: 110%;
  height: 80%;
  border-radius: 30% 30% 110% 110%;
  background: radial-gradient(at top, #ffffff 0%, #e4e4e4 100%);
  left: -5%;
  position: absolute;
  top: 50%;
}
.beard:hover .mustache {
  animation: mustache-wiggle 0.6s 1;
}
.mustache {
  position: absolute;
  width: 60%;
  left: 20%;
  top: -40px;
  font-size: 0;
}
.mustache-left {
  width: 50%;
  height: 80px;
  background: radial-gradient(at top left, #e4e4e4 0%, #ffffff 100%);
  border-radius: 200% 40% 100%;
  box-shadow: -2px 6px 8px #e4e4e4;
  display: inline-block;
  box-sizing: border-box;
}
.mustache-right {
  width: 50%;
  height: 80px;
  background: radial-gradient(at top right, #e4e4e4 0%, #ffffff 100%);
  border-radius: 40% 200% 40% 100%;
  box-shadow: 2px 6px 8px #e4e4e4;
  display: inline-block;
  box-sizing: border-box;
}