脉冲自举模态背景

是否有一种方法可以“脉动”从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>

引导具有2构建在类：

.modal-backdrop.fade { 
    filter: alpha(opacity=0); 
    opacity: 0; 
} 
.modal-backdrop.in { 
    filter: alpha(opacity=50); 
    opacity: .5; 
}

是否有可能在时间，2秒的量两者之间交替，例如？

感谢

来源

2016-09-21 Khrys

这个问题可能dublicate [http://stackoverflow.com/questions/6410730/how-to-do-a-webkit-css-endless-rotation-animation](http://stackoverflow。 com/questions/6410730/how-to-do-a-webkit-css-endless-rotation-animation） –

您应该使用css animations。这只是您可以做的一个例子，但您应该玩弄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;} 
}

有关在不同的浏览器支持的详细信息，请参阅本link通过CSS技巧。这是你的更新jsfiddle

来源

2016-09-21 18:28:51 jtmingus

完美！感谢灯 – Khrys

脉冲自举模态背景

回答

相关问题