[英]Pulsate bootstrap modal backdrop
是否有辦法“脈動”模式背景從50%紅色變為100%紅色,再回到50%紅色並無限循環?
<a title="Sobre" data-placement="bottom" data-toggle="modal" href="#Sobre" class="btn btn-primary"> <i class="fa fa-quote-left"></i> </a>
<div class="modal bs-modal-lg" id="Sobre" tabindex="-1" role="dialog" aria-labelledby="SobreLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header alert-danger">
<h4 class="modal-title" id="myModalLabel"><i class="fa fa-warning"></i>Danger</h4>
</div>
<div class="modal-body" style="padding-top: 15px; padding-bottom: 25px;">
<h2>Danger!</h2>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
Bootstrap具有2個內置類:
.modal-backdrop.fade {
filter: alpha(opacity=0);
opacity: 0;
}
.modal-backdrop.in {
filter: alpha(opacity=50);
opacity: .5;
}
例如,是否可以在一定時間(例如2秒)之間進行切換?
謝謝
您應該使用CSS動畫 。 這只是您可以執行的操作的一個示例,但是您應該使用animation
屬性具有的不同子屬性。
.modal-backdrop {
background-color: red;
animation: warn 2s infinite alternate;
-webkit-animation: warn 2s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes warn {
from {opacity: 0;}
to {opacity: 0.5;}
}
@keyframes warn {
from {opacity: 0;}
to {opacity: 0.5;}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.