순수한 CSS3 크리에이티브 탐색 메뉴 효과

간단한 튜토리얼

이것은 매우 창의적이고 순수한 CSS3 탐색 메뉴 효과입니다. 이 탐색 메뉴는 주로 CSS3 변환 및 전환 방법을 사용하여 효과를 얻습니다. 이는 매우 간단합니다. 이 특수 효과는 Attack of the Sun에서 제공됩니다.

사용법

HTML 구조

탐색 메뉴는

요소를 사용하여 순서가 지정되지 않은 목록을 래핑합니다.

<nav>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Demos</a></li>
      <li><a href="#">中文</a></li>
  </ul>
</nav>

CSS 스타일

이 탐색 메뉴의 메뉴 항목 위로 마우스를 슬라이드하면 메뉴 항목이 약간 기울어지는 애니메이션이 나타나고 두 줄이 메뉴 항목 위와 아래로 미끄러집니다. 메뉴 항목의 기울기 애니메이션은 변형 속성을 사용하여 마우스로 메뉴 항목을 롤오버할 때 하이퍼링크 요소를 회전하고 크기를 조정합니다.

li a {
    display: block;
    font-size: 20px;
    text-align: center;
    padding: 10px 15px;
}
 
li a:hover {
    transform: rotate(5deg) scale(1.1);
}

메뉴 항목의 위쪽 및 아래쪽 줄은 하이퍼링크 요소의 :before 및 :after 의사 요소를 사용하여 만들어집니다. 투명도 0과 너비 0으로 시작하고 변환 속성을 사용하여 회전하고 이동합니다.

li a:before, li a:after {
    opacity: 0;
    border-top: 1px solid white;
    content: '';
    display: block;
    position: relative;
    z-index: -1;
    margin: auto;
    width: 0px;
}
 
li a:before {
    top: 0px;
    transform: rotate(120deg) translateY(-50%) translateX(-50%);
}
 
li a:after {
    top: 5px;
    transform: rotate(-60deg) translateY(-50%) translateX(-50%);
}

마우스를 올리면 투명도가 1로 변경되고 너비는 20픽셀로 설정되며 이즈 효과를 사용하여 부드럽게 전환됩니다.

li a:hover:before, li a:hover:after{
    transition: all 0.3s ease;
    opacity: 1;
    width: 20px;
}

위 내용은 순수 CSS3 크리에이티브 내비게이션 메뉴 특수효과 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!