http://www.germanamericanconference.org/partners/ 와 같이 헤더의 메뉴 항목에 대한 동작을 설정하려고합니다 . 요소를 가리키면 앞뒤로 움직이는 막대가 있습니다. 제 경우에는 헤더에 다른 요소를 추가 할 수 없으며 그러한 효과는 순전히 CSS 여야하므로 대신 after의사 요소를 사용하고 있습니다.
여기 예 : https://jsfiddle.net/1czmx08y/
보시다시피 항목 사이를 이동할 때 지연이 있지만 전환 시간을 줄이면 트 위칭이 시작됩니다.
그러한 행동을 어떻게 피할 수 있습니까? 전환이 잘못된 것 같습니다.
모든 전환을 0.15s 또는 0.18s로 변경합니다. 지금은 훨씬 나아지지 않습니까? 나는 그것이 더 좋을 것이라고 생각하고 플러그인이나 더 많은 CSS 또는 JS를 사용하는 것보다 더 나은 선택이 될 수 있습니다.
html {
font-family: 'Josefin Slab', 'Comfortaa', sans-serif;
font-size: 1.2em;
background: #eee;
}
ul {
position: relative;
width: 27em;
height: 2em;
margin: 100px auto;
padding: 0;
white-space: nowrap;
}
ul li {
display: inline;
text-align: center;
}
ul li a {
position: relative;
top: 0;
left: 0;
right: 25em;
bottom: 0;
display: inline-block;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: .4em .2em;
color: #09C;
text-decoration: none;
text-shadow: 0 1px 0 white;
/*transition*/
-webkit-transition: width .3s,right .3s;
-moz-transition: width .3s,right .3s;
-o-transition: width .3s,right .3s;
transition: width .19s,right .19s;
}
ul li:nth-child(1) a { width: 2em; }
ul li:nth-child(2) a { width: 4em; }
ul li:nth-child(3) a { width: 4em; }
ul li:nth-child(4) a { width: 12em; }
ul li:nth-child(5) a { width: 5em; }
ul li:last-child a::after {
content: "";
position: absolute;
right: inherit;
bottom: -3px;
width: inherit;
height: 3px;
background: #ccc;
pointer-events: none;
/*transition*/
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .19s ease;
}
ul li:nth-child(1) ~ li:last-child a {
right: 25em;
width: 2em;
}
ul li:nth-child(2):hover ~ li:last-child a {
right: 21em;
width: 4em;
}
ul li:nth-child(3):hover ~ li:last-child a {
right: 17em;
width: 4em;
}
ul li:nth-child(4):hover ~ li:last-child a {
right: 5em;
width: 12em;
}
ul li:nth-child(5):last-child:hover a {
right: 0;
width: 5em;
}
ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after { background: #c351fa; }
ul li:last-child a {
min-width: 5em;
max-width: 5em;
}
ul li a:hover,
ul li a:focus {
color: #c351fa;
background-color: rgba(255,255,255,.6);
/*transition*/
-webkit-transition: width .3s,right .3s,background-color .3s;
-moz-transition: width .3s,right .3s,background-color .3s;
-o-transition: width .3s,right .3s,background-color .3s;
transition: width .19s,right .19s,background-color .19s;
}
ul li a:focus { border-bottom: 3px solid #c351fa; }<ul>
<li><a href="#"> ✿ </a></li><!--
--><li><a href="#"> Lorem </a></li><!--
--><li><a href="#"> Ipsum </a></li><!--
--><li><a href="#"> Consectetur adipisicing </a></li><!--
--><li><a href="#"> Sit amet </a></li>
</ul>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다