我一直在高低搜索一些bootstrap 3警报框的一些示例,从屏幕顶部到顶部,在所有元素顶部的中心屏幕上结束。
我发现了很多。模式,但是如何为警报框完成此行为?
您可以通过chipchocaly.py和他在这里提供的小提琴来查看此答案。这并不是您要寻找的东西,因为DIV从下到顶部移动,但是这个想法是相同的。创建三个divs:主 - 范围, arter-container , arter-content
<div class="main-container">
<div class="alert-container">
<!-- placeholder image -->
<img class="inner_img" src="http://placehold.it/1000x1000" />
<div class="alert-content">
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
</div>
</div>
</div>
</div>
然后应用此CSS
.main-container{
position: relative; /* Set to absolute */
}
.alert-container {
position: absolute; /* Set to absolute and positioned at top corner*/
top: 0;
left: 0;
}
.alert-content {
position: absolute; /* This moves it to the bottom (initial state) */
bottom: 90%;
width: 100%;
height: 10%;
transition: bottom 1s;
}
.main-container:hover .alert-content {
bottom: 50%; /* This moves it to the middle (only on hover) */
}
我在此处使用Bootstrap警报做了一个小提琴,并从页面中间到中间进行了过渡。您可以相应地调整它。