css - 通过 CSS 对 Bootstrap 活动导航栏项目的闪亮效果
问题描述
我已经通过 CSS 在活动的导航栏项目上定义了一个闪亮的效果:
@-webkit-keyframes ShineAnimation{
from {
background-repeat:no-repeat;
background-image:-webkit-linear-gradient(
top left,
rgba(255, 255, 255, 0.0) 0%,
rgba(255, 255, 255, 0.0) 47%,
rgba(255, 255, 255, 0.13) 49%,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0.13) 51%,
rgba(255, 255, 255, 0.0) 53%,
rgba(255, 255, 255, 0.0) 100%
);
background-position:-250px -250px;
background-size: 600px 600px
}
to {
background-repeat:no-repeat;
background-position:250px 250px;
}
}
.navbar-default .navbar-nav>li>a.active {
width:100%; /*Make sure the animation is over the whole element*/
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
我使用锚元素作为参考,因为这是为导航栏项目生成的 HTML 如下所示:
<li class="menu-item"><a href="/kkom/patrick/app.nsf/meetingsUpcoming.xsp" class="active">Kommande agendor</a></li>
我试图在锚父元素(li)上设置活动类,但这不起作用,因为我需要将元素的宽度设置为 100%
.navbar-default .navbar-nav>li.active {
width:100%; /*Make sure the animation is over the whole element*/
-webkit-animation-name: ShineAnimation;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
}
不希望使用锚元素,因为它只是 li 元素的一部分,因此闪亮效果适用于 li 元素的一半。
有没有人建议如何解决这个问题?
导航栏的 HTML 示例:
<div class="navbar applayout-banner navbar-default navbar-fixed-top" role="banner">
<a class="navbar-brand" href="init.xsp">MyApp</a>
<div class="container-fluid applayout-banner-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-target">
<span class="sr-only">Change Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div></div>
</div>
<div class="navbar-collapse-target navbar-collapse collapse">
<ul id="view:_id1:_id2:defLayout_al" class="nav navbar-nav applayout-links">
<li class="menu-item"><a href="/object.xsp?type=Preview" class="active">Running</a></li>
<li class="menu-item"><a href="/meetingsUpcoming.xsp" class="inactive">Coming meetings</a></li>
</ul>
</div>
</div>
</div>
解决方案
推荐阅读
- java - 为什么我的执行程序服务线程挂在 java 中?
- mongodb-query - 如何总结 Mongoshell 中的两个字段?
- c - 反向遍历链表的函数的空间复杂度分析?
- android - 如何让 ViewModel 观察者最初不观察?
- python - Matplotlib 为什么我收到“ValueError:查看限制最小值 0.0 小于 1 并且是无效的 Matplotlib 日期值”?
- javascript - 解构复杂对象
- c++ - rand() 和 srand() 未在此范围内声明
- python - 构建具有顺序时间序列的数据框
- c - 将矩阵的一行乘以给定的数字
- exchangewebservices - 如何让 EWS 冲突解决模式工作