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

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

青灯夜游

풀어 주다： 2019-11-30 16:39:42

앞으로

2490명이 탐색했습니다.

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

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

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

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

요구 사항 정의

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

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

로그인 후 복사

탐색 열의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!