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>

Comments

Popular posts from this blog

Install deb package via Termux

How to Make Blogger Safelink Converter v3

List of weapon buff materials, effects and how it can be durango wild lands