AI(ChatGPT)を使って半自動で月5万稼ぐ?
実際にやってみて結果・・ >>

【失敗しない】clipプロパティ+ナビゲーションバーでCSSアニメーション3選

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

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

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

 

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

 

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

 

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

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクールあります
  1. プログラミング学習&サポートが無料!
  2. 誰もが知っている超優良企業への就職サポート付き!
  3. 学習言語:Java、PHP、HTML、CSSなど

 

   話だけ聞いてみる