SCSS Animate Hover Scale Letters

Demo

HTML Full Page

<!DOCTYPE html><html><head> 
<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet" /> 
<style>html, body {
  height: 100%;
}

body {
  background: #e74c3c;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: 'Passion One', cursive;
}

.scale {
  font-size: 10vw;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #fff;
  cursor: pointer;
}
.scale span {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.1s;
  transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  transition: transform 0.1s, -webkit-transform 0.1s;
}
.scale span:hover {
  -webkit-animation: rotate-scale-up 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
          animation: rotate-scale-up 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
  z-index: 1;
}

@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(5) rotateZ(0);
            transform: scale(5) rotateZ(0);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}

@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(5) rotateZ(0);
            transform: scale(5) rotateZ(0);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}</style>
</head><body> 
<h1 class="scale">Test Click This Text</h1>
<script> const heading = document.querySelector('.scale');
heading.innerHTML = sparanWrap(heading.textContent);

function sparanWrap(word) {
  return [...word].map(letter => `<span>${letter}</span>`).join('');
}</script>
</body></html>

Subscribe to receive free email updates:

0 Response to "SCSS Animate Hover Scale Letters"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.