卡卡網(wǎng)

前文介紹了lettering.js創(chuàng)建的5款文字按鈕鼠標(biāo)懸停動畫效果，本文繼續(xù)介紹8款文字鼠標(biāo)懸停動畫效果，使用TweenMax.js創(chuàng)建實(shí)現(xiàn)。

demodownload

HTML

<ul class="grid">
  <li class="grid__item">
    <h2 class="letter-wrap">卡卡測速網(wǎng)</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.4" data-stagger="0.1">webkaka.com</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.2" data-stagger="-0.05">卡卡測速網(wǎng)</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.1" data-stagger="0.1">webkaka.com</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-stagger="-0.015">卡卡測速網(wǎng)</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="1" data-stagger="0.025">webkaka.com</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.8" data-stagger="-0.025">卡卡測速網(wǎng)</h2>
  </li>
  <li class="grid__item">
    <h2 class="letter-wrap" data-duration="0.1" data-stagger="-0.075">webkaka.com</h2>
  </li>
</ul>

文字容器使用h2元素標(biāo)簽，其class值是letter-wrap。

data-duration屬性表示動畫運(yùn)行時間，值越大，速度越慢，運(yùn)行時間越長。

data-stagger是每個文字運(yùn)行間隔時間，值越大，每個文字運(yùn)行間隔時間越長，負(fù)值表示動畫從右向左運(yùn)動。

JS

實(shí)例文字動畫使用第三方插件TweenMax.min.js，因此需要引用該JS庫文件。

<script src='TweenMax.min.js'></script>
<script>
const letterWrapClass = 'letter-wrap';
const letterWrapElements = document.getElementsByClassName(letterWrapClass);

[...letterWrapElements].forEach(el => {
  letterWrap(el, letterWrapClass);
  letterAnimation(el, letterWrapClass);
});

function letterWrap(el, cls) {
  const words = el.textContent.split(' ');
  const letters = [];

  cls = cls || 'letter-wrap';

  words.forEach(word => {
    let html = '';
    for (var letter in word) {
      html += `
        <span class="${cls}__char">
          <span class="${cls}__char-inner" data-letter="${word[letter]}">
            ${word[letter]}
          </span>
        </span>
      `;
    };

    let wrappedWords = `<span class="${cls}__word">${html}</span>`;
    letters.push(wrappedWords);
  });

  return el.innerHTML = letters.join(' ');
}

function letterAnimation(el, cls) {
  const tl = new TimelineMax({ paused: true });
  const characters = el.querySelectorAll(`.${cls}__char-inner`);
  const duration = el.hasAttribute('data-duration') ? el.dataset.duration : 0.3;
  const stagger = el.hasAttribute('data-stagger') ? el.dataset.stagger : 0.03;

  el.animation = tl.staggerTo(characters, duration, {
    y: '-100%',
    ease: Power4.easeOut },
  stagger);

  el.addEventListener('mouseenter', event => event.currentTarget.animation.play());
  el.addEventListener('mouseout', event => el.animation.reverse());
}
</script>

CSS

h2 {
  font-size: var(--h2-fs);
  text-align: center;
  color: var(--primary-clr);
}

.letter-wrap {
  display: inline-block;
  position: relative;
}

.letter-wrap * {
  pointer-events: none;
}

.letter-wrap__word {
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.letter-wrap__char {
  display: inline-block;
  position: relative;
  text-transform: uppercase;
}
.letter-wrap__char-inner {
  display: inline-block;
}
.letter-wrap__char-inner:after {
  content: attr(data-letter);
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--secondary-clr);
}

h2、.letter-wrap等CSS屬性，主要是設(shè)置文字位置、大小、顏色等樣式，不涉及到動畫設(shè)置，動畫完全由TweenMax.js來完成。

總結(jié)

本文介紹了8款文字鼠標(biāo)懸停動畫效果，使用TweenMax.js創(chuàng)建實(shí)現(xiàn)。

有關(guān)文字動畫的文章，也可參考前文lettering.js創(chuàng)建的5款文字按鈕鼠標(biāo)懸停動畫效果。

相關(guān)文章

• 16款精美的CSS3動畫按鈕（有懸停動畫效果）
• 9個CSS鼠標(biāo)懸停效果
• 6個CSS按鈕邊框過渡動畫效果
• 一個具有伸縮（鼠標(biāo)懸停）效果的CSS按鈕
• 使用box-shadow實(shí)現(xiàn)的7個按鈕懸停效果
• 純CSS3：鼠標(biāo)移上去三角形(箭頭)旋轉(zhuǎn)【實(shí)例演示#源碼下載】
• CSS懸停效果按鈕一簡單實(shí)例（鼠標(biāo)移到按鈕上變成其他顏色）
• 漂亮的css3圓形鼠標(biāo)懸停效果實(shí)例
• 使用css轉(zhuǎn)換和3d旋轉(zhuǎn)的圓形鼠標(biāo)懸停效果【2例】
• 很好看的css3動畫按鈕鼠標(biāo)懸停效果【2個實(shí)例】

• 如何使用CSS為文本添加漸變疊加【實(shí)例】
• css3實(shí)現(xiàn)的彩色漸變描邊文字效果
• 純CSS實(shí)現(xiàn)文字漸變和文字掃光動畫效果
• CSS實(shí)現(xiàn)文字顏色漸變效果
• CSS3實(shí)現(xiàn)的9種文本陰影效果【收藏】
• css text-shadow 輕松實(shí)現(xiàn)文字投影/描邊/浮雕/剪紙/發(fā)光效果

標(biāo)簽: TweenMax.js  鼠標(biāo)懸停效果