순수 CSS를 사용하여 특수 효과 탐색 모음을 만드는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

순수 CSS를 사용하여 특수 효과 탐색 모음을 만드는 방법은 무엇입니까?

青灯夜游

Oct 11, 2018 pm 05:43 PM

cssCSS 특수 효과네비게이션 바

이 글에서는 순수 CSS를 사용하여 특수 효과 내비게이션 바를 만드는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

효과를 보려면 먼저 사진을 업로드하세요.

다음 내용을 계속 읽기 전에 잠시 시간을 내셔도 됩니다. 위의 효과에 대해 생각해 보거나 JS를 사용하지 않고도 위의 효과를 영리하게 얻을 수 있는지 직접 시도해 보세요.

좋아요, 계속하세요. 이 효과는 제가 사업을 전개하는 과정에서 겪었던 작은 문제와 비슷합니다. 사실 자바스크립트를 사용해도 첫 반응은 매우 번거롭다는 것입니다. 그래서 CSS만 사용하여 이 효과를 얻을 수 있는지 궁금합니다.

요구 사항 정의

간단한 규칙을 정의하며, 요구 사항은 다음과 같습니다.

不可思议的CSS
导航栏
光标小下划线跟随
PURE CSS
Nav Underline

탐색 열의 li 너비가 고정되어 있지 않습니다.
탐색의 왼쪽 Li에서 오른쪽으로 이동할 때 li, 밑줄이 왼쪽으로 이동에서 오른쪽으로 이동합니다. 마찬가지로 내비게이션의 오른쪽 li에서 왼쪽 li로 이동하면 밑줄이 오른쪽에서 왼쪽으로 이동합니다.

구현 요구사항

처음 이 효과를 봤을 때 다음 애니메이션은 CSS만으로는 완성이 불가능하다고 느꼈습니다. CSS만 사용하여 이를 달성하려면 다른 방법을 찾고 몇 가지 영리한 방법을 사용해야 합니다. 자, CSS를 사용하여 단계별로 이 효과를 달성하기 위한 몇 가지 트릭을 사용해 보겠습니다. 난이도 분석:

너비가 고정되어 있지 않습니다

첫 번째 어려움은 li의 너비가 고정되어 있지 않다는 것입니다. 그러므로 우리는 li 자체의 너비에 대해 호들갑을 떨 필요가 있을 수도 있습니다. 각 li의 너비는 반드시 확실하지 않으므로 해당 밑줄의 길이는 반드시 일치해야 합니다. 당연히 우리는 border-bottom을 사용하는 것을 생각할 것입니다.

li { border-bottom: 2px solid #000;}

그래서 지금은 이렇게 생겼을지도 모르겠습니다(li는 서로 연결되어 있고, li 사이의 간격은 padding을 사용하여 생성됨).

물론 여기 처음에는 밑줄이 없기 때문에 우리는 숨겨야 할 수도 있습니다.

li { border-bottom: 0px solid #000;}

뒤집어 의사 요소 사용

이 방법은 작동하지 않는 것 같습니다. 숨긴 후 li를 가리키면 밑줄 애니메이션이 필요하고 li 자체를 이동할 수 없기 때문입니다. 따라서 의사 요소 사용을 고려합니다. 각 li 의사 요소에 밑줄을 적용합니다.

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #000;
}

아래 첫 번째 단계의 애니메이션을 고려하세요. 마우스를 가져갈 때 밑줄이 한쪽에서 움직여 확장되어야 합니다. 따라서 절대 위치 지정을 사용하여 li의 의사 요소 너비를 0으로 설정합니다. 마우스를 가져갈 때 너비는 width: 0 -> width: 100%이며 CSS는 다음과 같습니다.

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
    width: 100%;
}

다음 효과 획득:

왼쪽으로 이동하여 나가기, 오른쪽으로 이동하여 나가기

좋아요, 성공에 한 걸음 더 가까워진 것 같아요. 이제 가장 어려운 질문이 하나 남았습니다.

선이 커서의 움직임을 따르도록 만드는 방법으로 탐색의 왼쪽 li에서 오른쪽 li로 이동할 때 밑줄이 왼쪽에서 오른쪽으로 이동합니다. 마찬가지로 내비게이션의 오른쪽 li에서 왼쪽 li로 이동하면 밑줄이 오른쪽에서 왼쪽으로 이동합니다.

현재 효과를 자세히 살펴보겠습니다.

첫 번째 li에서 두 번째 li로 전환하면 첫 번째 li의 밑줄이 잘못된 방향으로 철회됩니다. 따라서 밑줄의 초기 위치를 이동하고 왼쪽(100%)으로 설정해야 할 수 있습니다. 그러면 밑줄이 철회될 때마다 첫 번째 li가 정확해집니다.

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
}
li:hover::before {
  left: 0;
  width: 100%;
}

효과를 살펴보세요:

음, 두 사진을 잘 비교해 보세요. 두 번째 효과는 실제로 참깨를 따고 수박을 잃는 것입니다. 첫 번째 리의 방향은 맞으나, 두 번째 리의 밑줄이 움직이는 방향이 또 틀리네요.

Magical ~ selector

그래서 현재 떠있는 리의 밑줄 움직임을 바꾸지 않고(말이 꼬이는) 다음 리의 밑줄 움직임을 바꿀 수 있는 방법이 시급히 필요합니다.

그렇습니다. 여기서는 ~ 선택기를 사용하여 이 어려운 임무를 완료할 수 있습니다. 이는 이 예에서 가장 중요한 부분이기도 합니다.

현재 마우스오버된 li의 경우 해당 의사 요소의 밑줄 위치는 왼쪽: 100%인 반면, li:hover ~ li::before의 경우 위치는 왼쪽: 0입니다. CSS 코드는 대략 다음과 같습니다.

li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
  transition: 0.2s all linear;
}
li:hover::before {
  width: 100%;
  left: 0;
}
li:hover ~ li::before {
  left: 0;
}

이 시점에서 우리가 원하는 효과가 달성되었습니다! 꽃을 뿌린다. 확인해 보세요:

效果不错，就是有点僵硬，我们可以适当改变缓动函数以及加上一个动画延迟，就可以实现上述开头里的那个效果了。当然，这些都是锦上添花的点缀。（以上非原创，转自网络）

完整代码实例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{margin:0;padding:0;}
        a{text-decoration:none;color:#000;}
        ul{margin-top:100px;}
        li{float:left;list-style:none;padding:0 20px;cursor:pointer;position:relative;}
        li::before {
          content: "";
          position: absolute;
          top: 0;
          left: 100%;
          width: 0;
          height: 100%;
          border-bottom: 2px solid #4C7C9C;
          transition: 0.2s all linear;
          z-index:-1;
        }
        li:hover::before {
          width: 100%;
          left: 0;
        }
        li:hover ~ li::before {
          left: 0;
        }        
    </style>
    <body>
        <ul>
            <li><a href="http://www.baidu.com">11111</a></li>
            <li><a href="http://www.taobao.com">22222</a></li>
            <li><a href="http://www.sina.com">33333</a></li>
            <li><a href="http://www.jd.com">44444</a></li>
            <li><a href="http://www.360.com">55555</a></li>
        </ul>
    </body>
</html>

实际项目中若li里面有a标签出现不能点击的情况，注意检查伪类和li的层级关系，设置好各自z-index值。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问 CSS视频教程，更多相关教程请访问 CSS3视频教程！

更多炫酷CSS3、javascript特效代码，尽在：javascript特效大全

위 내용은 순수 CSS를 사용하여 특수 효과 탐색 모음을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

이 기사는 博客园에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

핫 AI 도구

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.