순수 CSS를 사용하여 특수 효과 탐색 모음을 만드는 방법은 무엇입니까?
- 青灯夜游앞으로
- 2018-10-11 17:43:222471검색
이 글에서는 순수 CSS를 사용하여 특수 효과 내비게이션 바를 만드는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
효과를 보려면 먼저 사진을 업로드하세요.
다음 내용을 계속 읽기 전에 잠시 시간을 내셔도 됩니다. 위의 효과에 대해 생각해 보거나 JS를 사용하지 않고도 위의 효과를 영리하게 얻을 수 있는지 직접 시도해 보세요.
좋아요, 계속하세요. 이 효과는 제가 사업을 전개하는 과정에서 겪었던 작은 문제와 비슷합니다. 사실 자바스크립트를 사용해도 첫 반응은 매우 번거롭다는 것입니다. 그래서 CSS만 사용하여 이 효과를 얻을 수 있는지 궁금합니다.
요구 사항 정의
간단한 규칙을 정의하며, 요구 사항은 다음과 같습니다.
ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c6不可思议的CSSbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6导航栏bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6光标小下划线跟随bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6PURE CSSbed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6Nav Underlinebed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689
탐색 열의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!