我正在尝试为标题中的菜单项设置行为,例如: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>