CSS3 を使用してクールなアニメーション ナビゲーションを作成する

Web 開発の昔、開発者は、Web サイト用にあらゆる種類のアニメーションを作成する必要があるときは常に Adob​​e の Flash に依存していました。時間が経つにつれて、人々は Flash を放棄し、CSS と JavaScript を利用してこれらのことの多くを行うようになりました。最後に、CSS3 と CSS3 が現在享受している広範なブラウザーのサポートにより、いくつかの CSS3 だけを使用して、他には何も使用せずに、いくつかの非常に素晴らしいことができるようになります。

このチュートリアルでは、CSS3 を使用してクールなアニメーション ナビゲーション メニューを作成する方法を説明します。以下の CodePen デモで実際の動作を確認できます:

メニューの実装に興奮していますか?はじめましょう。

決定点

HTML5 では、多くの新しいタグと機能が導入されています。これは、スタイルを設定したいすべてのものをラップするために div 要素を使用する必要がなくなったことを意味します。私たちのマークアップは、より合理的かつセマンティックなものになりました。

Web サイトのタイトルセクションから始めましょう。以下に示すように、これを header 要素内にラップします。

リーリー

header 要素には、スペースフィラーとしてのみ機能する空の div が含まれています。その後、メイン ナビゲーションを含む nav 要素が作成されます。ナビゲーション リンクは基本的に順序なしリストの一部であり、後でスタイルを設定します。

次に、Web ページのメインコンテンツのマークアップを作成します。ここでは section タグと article タグを使用します。

リーリー

article タグには Web ページのメインコンテンツ、つまりブログ投稿が含まれ、section タグにはブログ投稿のさまざまなセクションが含まれます。

タイトルスタイルの設定

前に述べたように、ページの header の上部にはスペースフィラー div 要素が含まれます。この例では空白スペースになるため、高さを 150px に設定します。以下は、div 要素に適用されるすべての CSS です。

リーリー

div 要素の一部をナビゲーション リンクの上に配置したいと考えています。そのため、999 の z-index を適用しました。ただし、このプロパティは静的に配置された要素に対しては機能しないため、position を relative に変更する必要があります。 box-shadow プロパティは、フィラー div が実際にナビゲーション メニューの上に配置され、微妙な 3D 効果を与えます。

繰り返しの線形グラデーションを body 要素に適用して、背景をより興味深いものにすることもできます。

リーリー

ナビゲーション メニューのスタイルを設定する

ナビゲーション メニュー内のリンクは、等間隔で水平方向に並べて配置する必要があります。これを実現するには複数の方法がありますが、この特定のケースでは最も簡単で効率的であるため、Flexbox を使用します。

順序なしリスト、順序なしリスト要素、および順序なしリスト要素のリンクに適用する CSS は次のとおりです。 リーリー

順序なしリストの

display を flex に設定すると、すべてのリスト要素が並べて配置され、gap 属性の値が に設定されます。 0.1 rem では、それらの間に余分なスペースが生じます。

また、リスト要素に不均一なパディングを適用します。上部のパディングが

1.5rem に設定されているのに対し、下部のパディングは 0.5rem のみであることがわかります。 top 属性に割り当てられたオフセット値を補正しています。また、底面を丸くしたいので、##10px の border-radius を右下隅と左下隅に適用します。 リスト要素の

top

位置をオフセットする必要があるのはなぜですか?これは、ホバー時にアニメーションを下の位置に移動させるためです。 transition プロパティは、アニメーションを突然ではなくスムーズにするのに役立ちます。 デフォルトでは、リスト要素内のリンクは水色で下線が引かれます。

color

を white に設定し、text-decoration を none に設定することで、これらを削除します。 最後に、次の CSS を使用してメニューをよりカラフルにします:

リーリー

ご覧のとおり、各ナビゲーション メニュー リンクに個別のクラスを割り当てる必要はありません。

nth-child

セレクターを使用するだけで、それらを個別にスタイル設定できます。これまでのところ次のとおりです:

为伪元素设置动画

现在我们唯一要做的就是导航链接顶部的白框的创建和动画。我们借助伪元素来实现这一点。我们使用 ::after 伪类来创建伪元素。这个伪元素成为我们原始选择器的最后一个子元素。

这是我们用来创建伪元素的 CSS：

nav ul li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  background: white;
  top: -30px;
  left: 0;
  border-radius: 0 0 10px 10px;
}

为 content 属性提供一个值很重要，即使该值是空字符串。我们将 position 设置为 absolute 以将该元素从正常文档流中取出并按照我们想要的方式定位。 100% 的宽度可确保所有伪元素与其各自导航链接的 width 相匹配。

最终结果如下所示：

最终想法

在本教程中，我们仅使用一些 CSS3 属性创建了一个很酷的动画导航菜单，而无需编写任何 JavaScript 代码。您可以通过多种有趣的方式使用 CSS3 为网页上的内容添加动画效果。虽然一些非常复杂的场景可能需要使用 JavaScript 来实现动画，但您会惊讶地发现仅使用一些 CSS 就能完成这样的事情。阅读这两篇文章以获得灵感并了解更多信息。

以上がCSS3 を使用してクールなアニメーション ナビゲーションを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。