CSSだけで、アニメーションするheverエフェクトの実装。数が多いので、いろいろなシーンで使えそうです。それぞれ「Home」、「About」、「Contacts」にオンマウスするとエフェクトが発動します。

Effect 1

Effect 2

Effect 3

Effect 4

Effect 5

Effect 6

Effect 7

Effect 8

Effect 9

Effect 10

Effect 11

Effect 12

Effect 13

Effect 14

Effect 15

Effect 16

Effect 17

Effect 18

Effect 19

Effect 20

 

基本的なhtmlのソース

  <section class="section">
    <h2 class="title">Effect 1</h2>
    <ul class="menu">
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">Home</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">About</span></a>
      </li>	
      <li class="menu__item">
        <a href="#0" class="menu__link hover1"><span class="menu__label hover1__label">Contacts</span></a>
      </li>	
    </ul>
  </section>
引用と参考;https://codepen.io/melnik909/pen/BQBLoO
戻るボタン