CSS3를 사용하여 멋진 애니메이션 탐색 기능 만들기

옛날 웹 개발 시대에 개발자들은 웹 사이트에 대한 모든 종류의 애니메이션을 만들어야 할 때마다 Adobe Flash를 사용했습니다. 시간이 지남에 따라 사람들은 Flash를 포기하고 CSS와 JavaScript의 도움으로 이러한 많은 작업을 수행하기 시작했습니다. 마지막으로, CSS3와 현재 누리고 있는 폭넓은 브라우저 지원을 통해 CSS3만 사용하고 다른 것은 아무것도 사용하지 않고 꽤 놀라운 작업을 수행할 수 있습니다.

이 튜토리얼에서는 CSS3를 사용하여 멋진 애니메이션 탐색 메뉴를 만드는 방법을 보여 드리겠습니다. 아래 CodePen 데모에서 실제로 작동하는 모습을 볼 수 있습니다:

메뉴 구현이 기대되시나요? 시작하자.

결정 표시

HTML5에는 많은 새로운 태그와 기능이 도입되었습니다. 즉, 스타일을 지정하려는 모든 항목을 래핑하기 위해 더 이상 div 요소를 사용할 필요가 없습니다. 우리의 마크업은 이제 더욱 합리적이고 의미론적일 수 있습니다.

웹사이트의 제목 섹션부터 시작해 보겠습니다. 아래와 같이 header 요소 안에 이를 래핑합니다.

으아아아

header 요소에는 공백 채우기 역할만 하는 빈 div ，它仅充当空格填充符。之后，我们有一个 nav이 포함되어 있습니다. 그 다음에는 기본 탐색 기능이 포함된 nav 요소가 있습니다. 탐색 링크는 기본적으로 순서가 지정되지 않은 목록의 일부이며 나중에 스타일을 지정할 것입니다.

이제 웹페이지의 주요 콘텐츠에 대한 마크업을 작성하겠습니다. 여기서는 section 和 article 태그를 사용하겠습니다.

으아아아

article 标签包含网页的主要内容，即博客文章，而 section 태그에는 블로그 게시물의 다양한 부분이 포함되어 있습니다.

제목 스타일 설정

앞서 언급했듯이 웹페이지의 header 将在顶部包含一个空格填充符 div 元素。由于在我们的示例中这将是空白区域，因此我们将为其指定 150px 的高度。以下是应用于 div에는 상단에 공백 채우기

요소가 포함됩니다. 예제에서는 공백이므로 높이를 150px로 지정하겠습니다. 아래는

요소에 적용된 모든 CSS입니다. div 元素部分放置在导航链接上。这就是为什么我们应用了 999 的 z-index 。但是，此属性不适用于静态定位的元素，因此我们需要将 position 更改为 relative。 box-shadow 属性为我们提供了微妙的 3D 效果，填充符 div 으아아아

우리는

요소를 탐색 링크 위에 부분적으로 배치하려고 합니다. 이것이 999의 z-index를 적용한 이유입니다. 그러나 이 속성은 정적으로 배치된 요소에는 작동하지 않으므로 위치를 상대로 변경해야 합니다. box-shadow 속성은 실제로 탐색 메뉴 위에 필러body를 배치하여 미묘한 3D 효과를 제공합니다.

또한

요소에 반복되는 선형 그라데이션을 적용하여 배경을 더욱 흥미롭게 만들 수도 있습니다.

으아아아

탐색 메뉴 스타일 설정

내비게이션 메뉴의 링크는 수평으로 나란히 배치되어야 하며 링크 사이에 일정한 간격이 있어야 합니다. 이를 달성하는 방법은 여러 가지가 있지만 이 특별한 경우에는 가장 간단하고 효율적이기 때문에 Flexbox를 사용하겠습니다.

display 设置为 flex 会将所有列表元素并排放置，并将 gap다음은 정렬되지 않은 목록, 정렬되지 않은 목록 요소 및 정렬되지 않은 목록 요소 링크에 적용할 CSS입니다. 으아아아 순서가 지정되지 않은 목록의

속성 값을

0.1rem으로 설정하면 목록 사이에 추가 간격이 생깁니다. 또한 목록 요소에 고르지 않은 패딩을 적용합니다. 위쪽 패딩은 1.5remtop 属性的偏移值。我们还希望底部是圆角的，因此我们将 10px 的 border-radius으로 설정되어 있고 아래쪽 패딩은

0.5rem

으로 설정되어 있는 것을 볼 수 있습니다. top 속성에 할당된 오프셋 값을 보상하고 있습니다. 또한 바닥이 둥글게 되길 원하므로 오른쪽 하단과 왼쪽 하단 모서리에 10px의 border-radius를 적용합니다. transition

목록 요소의

topcolor 设置为 white 并将 text-decoration 위치를 오프셋하는 이유는 무엇인가요? 마우스를 올리면 더 낮은 위치로 애니메이션을 적용하기 때문입니다. 속성은 애니메이션을 갑작스럽지 않고 부드럽게 만드는 데 도움이 됩니다.

기본적으로 목록 요소 내의 링크는 연한 파란색과 밑줄로 표시됩니다. color를

white

로 설정하고 text-designer를

none으로 설정하여 제거합니다.

마지막으로 다음 CSS를 사용하여 메뉴를 더욱 다채롭게 만듭니다.

으아아아 nth-child

선택기를 사용하여 개별적으로 스타일을 지정할 수 있습니다. 이것이 지금까지 우리가 가지고 있는 것입니다: 🎜 🎜🎜🎜🎜

设置文章内容的样式

我们的导航菜单现在看起来正是我们想要的。然而，主要文章内容几乎看不见。现在我们来解决这个问题。为了提高内容的可见性和外观，我们需要做的就是应用以下 CSS：

article.main-content, nav {
  width: 90%;
  margin: 0px auto;
}

section {
  background: white;
  padding: 2rem;
  border-radius: 0.5rem;
  position: relative;
  z-index: 999;
  top: -0.5rem;
}

p {
  line-height: 1.5;
  margin: 1rem 0;
}

将相同的 width 和 margin 应用于我们的文章，导航将它们正确对齐。还记得我们之前为无序列表分配了 20px 的 margin-left 吗？这将使我们的导航菜单稍微位于文章左边缘的右侧。

此处的 z-index 属性也适用于在悬停动画时将内容保留在菜单链接上方。

动画导航菜单

我们想要为导航菜单链接设置三个属性的动画。第一个是我们将菜单项垂直移动到较低位置的位置。

我们还更新了填充属性，使顶部填充减少到 0.5rem，而底部填充增加到 1.5rem。顶部和底部填充值基本上颠倒了，因为导航菜单链接现在将在底部而不是顶部被切断。

我们设置动画的第三个属性是 border-radius，左上角和右上角变为 10px。左下角和右下角变为 0。

以下是每当用户将鼠标悬停在菜单项上时应用这些更改的 CSS：

nav ul li:hover {
  top: 20px;
  padding: 0.5rem 1rem 1.5rem 1rem;
  border-radius: 10px 10px 0 0;
}

所有这些动画都在0.2s内发生，因为这是我们之前分配给 transition 属性的持续时间。

为伪元素设置动画

现在我们唯一要做的就是导航链接顶部的白框的创建和动画。我们借助伪元素来实现这一点。我们使用 ::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 중국어 웹사이트의 기타 관련 기사를 참조하세요!