2016-09-21 4 views
0

모달 배경을 50 % 적색에서 100 % 적색으로 바꾸고 다시 50 % 적색과 무한 반복으로가는 "맥동 (pulsate)"방법이 있습니까?맥동 부트 스트랩 모달 배경

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

는 예를 들어, 시간, 2 초 양 모두를 교대하는 것이 가능 :

http://jsfiddle.net/j8n5u8xy/

<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 빌드를 가지고?

감사

+0

가능한이 질문에 대한 대답 [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) –

답변

2

당신은 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;} 
} 

다른 브라우저에서 지원에 대한 자세한 정보를 들어, CSS 트릭에 의해이 link를 참조하십시오. 여기에 귀하의 업데이 트가 jsfiddle

+0

완벽 해! 조명에 감사드립니다. – Khrys