Animate LENGTH of border-bottom(动画边框底部的长度)
问题描述
我有一个导航栏.在悬停任何菜单项时,我希望获得与 here中完全相同的边框底部动画效果a>(查看左上角的边框或菜单项在悬停时的动画效果.)
I have a navbar. On hover of any of it menu item I want to have the exact same effect of border-bottom animation as in here (See how the border or menu items at the top-left animates when you hover them.)
我试图在 stackoverflow 和谷歌上找到类似的问题,但我没有发现任何有用的东西.
I tried to find similar asked questions on stackoverflow and also on google but I didn't find anything helpful.
非常感谢任何帮助.
推荐答案
嗯,这就像使用开发人员工具检查 Web 一样简单.他们在该页面中所做的是使用 :before
伪元素在菜单内创建一个元素.在悬停时,他们使用 CSS 变换(缩放)来改变长度.
Well, it was as easy as inspecting the web with the developer tools. What they do in that page is to create an element inside the menu using the :before
pseudo-element. On hover they use CSS transforms (scale) to change the length.
jsfiddle.
span
{
display: inline-block;
padding: 6px 0px 4px;
margin: 0px 8px 0px;
position: relative;
}
span:before
{
content: '';
position: absolute;
width: 100%;
height: 0px;
border-bottom: 1px solid black;
bottom: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
}
span:hover:before
{
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
这篇关于动画边框底部的长度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:动画边框底部的长度
基础教程推荐
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 动态更新多个选择框 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01