【失敗しない】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: white;
  background-color: pink;
  width: 100%;
  padding-left: 2px;
  /* 切り抜き指定 */
  clip: rect(30px, 100px, 0, 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, 400px, 25px, 0);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: white;
  background-color: pink;
  width: 100%;
  padding-left: 2px;
  /* 切り抜き指定 */
  clip: rect(0, 100px, 0, 0);
  /* アニメーションの速度指定 */
  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, 115px, 30px, 0);
}
.nav ul li a:before {
  /* 絶対的位置指定 */
  position: absolute;
  /* hover後に表示される文字の位置指定 */
  left: 0;
  top: -10;
  /* 選択された要素の属性の値を受け取りスタイルを指定 */
  content: attr(data-content);
  display: inline-block;
  color: white;
  background-color: pink;
  width: 100%;
  padding-left: 2px;
  /* 切り抜き指定 */
  clip: rect(0px, 20px, 0px, 0px);
  /* アニメーションの速度指定 */
  transition: 700ms;
}

ここがポイント！

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