【徹底解説】clipアニメーションで切り抜くCSSナビゲーションバーデザイン３選

※当サイトには一部宣伝が含まれます。

今回は【徹底解説】clipアニメーションで切り抜くCSSナビゲーションバーデザイン３選をご紹介。シンプルかつ洗練されたデザイン。clipプロパティでnavbarの切り抜き。アニメーションで動く。Web制作で使える。ポートフォリオにも最適。コピペOK。HTML, CSSだけ
動きを見ていただければ使いたくなること間違いなしです！

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次

【徹底解説】clipアニメーションで切り抜くCSSナビゲーションバーデザイン３選

下から文字の色が変化するclipアニメーション付きナビゲーションバー
右端から文字色が変化するclipアニメーション付きナビゲーションバー
上からシャッターが閉まるように文字色が変化するclipアニメーション付きナビゲーションバー

１. 下から文字の色が変化するclipアニメーション付きナビゲーションバー

動きは下の画像のような感じになります

実際の動きはこちら

コードはこちら

コードを見る

  <div class="nav">
    <!-- 各ナビゲーション要素を用意 -->
    <ul>
      <li><a href="#" data-content="Home">Home</a></li>
      <li><a href="#" data-content="About">About</a></li>
      <li><a href="#" data-content="Contact">Contact</a></li>
      <li><a href="#" data-content="Blog">Blog</a></li>
    </ul>
  </div>

ul {
  background: #fff;
  /* flexboxでナビゲーション要素を横並びに指定 */
  display: flex;
  /* ナビゲーション要素を一定間隔で均等に配置 */
  justify-content: space-around;
  width: 75%;
  margin: auto;
  padding-left: 0;
  padding-top:100px;
}
li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  /* テキストを全て大文字に変換 */
  text-transform: uppercase;
  /* 文字間隔の調整 */
  letter-spacing: 4px;
}
.nav ul li a {
  color: #444;
  /* デフォルトのダサすぎる装飾を削除 */
  text-decoration: none;
  /* 相対的位置指定 */
  position: relative;
}
.nav ul li a:hover:before {
  /* 切り抜き指定 */
  clip: rect(0, 190px, 190px, 0);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: pink;
  width: 100%;
  /* 切り抜き指定 */
  clip: rect(30px, 0, 10px, 0);
  /* アニメーションの速度指定 */
  transition: 600ms;
}

ここがポイント！

flexboxのjustify-content: space-aroundでナビゲーションボタンを一定間隔で均等に中央配置
a:beforeにposition:absoluteを指定しclipプロパティを使用する準備OK
a:beforeのhover前後にclipにてナビゲーションバー要素を切り抜く
clipで切り抜いた部分にcontent: attr(data-content)にて選択された要素の属性値を受け取りスタイルを指定(今回の場合、ピンク色の文字がナビゲーションメニューに重なるイメージ)
各transitionプロパティをhover後に指定することで滑らかなアニメーションを実現

２. 右端から文字色が変化するclipアニメーション付きナビゲーションバー

動きは下の画像のような感じになります

実際の動きはこちら

コードはこちら

コードを見る

  <div class="nav">
    <!-- 各ナビゲーション要素を用意 -->
    <ul>
      <li><a href="#" data-content="Home">Home</a></li>
      <li><a href="#" data-content="About">About</a></li>
      <li><a href="#" data-content="Contact">Contact</a></li>
      <li><a href="#" data-content="Blog">Blog</a></li>
    </ul>
  </div>

ul {
  background: #fff;
  /* flexboxでナビゲーション要素を横並びに指定 */
  display: flex;
  /* ナビゲーション要素を一定間隔で均等に配置 */
  justify-content: space-around;
  width: 75%;
  margin: auto;
  padding-left: 0;
  padding-top:100px;
}
li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  /* テキストを全て大文字に変換 */
  text-transform: uppercase;
  /* 文字間隔の調整 */
  letter-spacing: 4px;
}
.nav ul li a {
  color: #444;
  /* デフォルトのダサすぎる装飾を削除 */
  text-decoration: none;
  /* 相対的位置指定 */
  position: relative;
}
.nav ul li a:hover:before {
  /* 切り抜き指定 */
  clip: rect(0, 190px, 190px, 0);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: pink;
  width: 100%;
  /* 切り抜き指定 */
  clip: rect(0px, 0px, 20px, 180px);
  /* アニメーションの速度指定 */
  transition: 500ms;
}

ここがポイント！

flexboxのjustify-content: space-aroundでナビゲーションボタンを一定間隔で均等に中央配置
a:beforeにposition:absoluteを指定しclipプロパティを使用する準備OK
a:beforeのhover前後にclipにてナビゲーションバー要素を切り抜く
clipで切り抜いた部分にcontent: attr(data-content)にて選択された要素の属性値を受け取りスタイルを指定(今回の場合、ピンク色の文字がナビゲーションメニューに重なるイメージ)
各transitionプロパティをhover後に指定することで滑らかなアニメーションを実現

３. 上からシャッターが閉まるように文字色が変化するclipアニメーション付きナビゲーションバー

動きは下の画像のような感じになります

実際の動きはこちら

コードはこちら

コードを見る

  <div class="nav">
    <!-- 各ナビゲーション要素を用意 -->
    <ul>
      <li><a href="#" data-content="Home">Home</a></li>
      <li><a href="#" data-content="About">About</a></li>
      <li><a href="#" data-content="Contact">Contact</a></li>
      <li><a href="#" data-content="Blog">Blog</a></li>
    </ul>
  </div>

ul {
  background: #fff;
  /* flexboxでナビゲーション要素を横並びに指定 */
  display: flex;
  /* ナビゲーション要素を一定間隔で均等に配置 */
  justify-content: space-around;
  width: 75%;
  margin: auto;
  padding-left: 0;
  padding-top:100px;
}
li {
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  /* テキストを全て大文字に変換 */
  text-transform: uppercase;
  /* 文字間隔の調整 */
  letter-spacing: 4px;
}
.nav ul li a {
  color: #444;
  /* デフォルトのダサすぎる装飾を削除 */
  text-decoration: none;
  /* 相対的位置指定 */
  position: relative;
}
.nav ul li a:hover:before {
  /* 切り抜き指定 */
  clip: rect(0, 400px, 20px, 0);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: pink;
  width: 100%;
  /* 切り抜き指定 */
  clip: rect(0, -100px, 0, -100px);
  /* アニメーションの速度指定 */
  transition: 500ms;
}

ここがポイント！

flexboxのjustify-content: space-aroundでナビゲーションボタンを一定間隔で均等に中央配置
a:beforeにposition:absoluteを指定しclipプロパティを使用する準備OK
a:beforeのhover前後にclipにてナビゲーションバー要素を切り抜く
clipで切り抜いた部分にcontent: attr(data-content)にて選択された要素の属性値を受け取りスタイルを指定(今回の場合、ピンク色の文字がナビゲーションメニューに重なるイメージ)
各transitionプロパティをhover後に指定することで滑らかなアニメーションを実現