상자 그림자 켜기/끄기 전환?

Question

http://lucasdebelder.be/googledoodle/ 여기에 라이브 버전이 있습니다.

포털에서 볼 수 있듯이 주위에 빛이있어 box-shadow; 내가 계속 켜고 꺼내기를 원한다. 좀 더 실제 느낌이 들지만, 나는 transition: box-shadow ease-in-out;을 추가했지만 시작시에만 적용됩니다. , 페이지가로드 된 후 계속 켜져 있습니다.

다음은 관련 코드입니다. (portaal_links 포털 왼쪽을 의미하며, 적합 Rechts, 그것은 네덜란드의 올바른 의미)

HTML :

<div class="portaal portaal_links"></div> 
<div class="portaal portaal_rechts"></div> 

CSS : 대신 전환

/*portaal general*/ 
.portaal { 
    position: absolute; 
    width: 100px; 
    height: 200px; 
    border-radius: 50px/100px; 
    bottom: 315px; 
} 



/*portaal left*/ 
.portaal_links { 
    background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    transition: box-shadow ease-in-out; 
    transition-delay: 1s; 
    transition-duration: 1s; 
    box-shadow: 0 0 55px #57B6FF; 
    opacity: 0.75; 
    left: 50px; 
} 


.portaal_rechts { 
    background: radial-gradient(ellipse at center, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    box-shadow: 0 0 55px #FF6600; 
    opacity: 0.55; 
    left: 750px; 
} 

Answer 1

를 사용하여 애니메이션.

키 프레임 : https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

애니메이션 : 아래 box-shadow에 같은 animation을 만들 수 https://www.w3schools.com/css/css3_animations.asp

.test { 
 
    background: red; 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 200px; 
 
    animation: testing 3s linear infinite; } 
 

 
@keyframes testing { 
 
    25% { 
 
    box-shadow: 0 0 55px rgba(0,0,0,0.9); } 
 
    75% { 
 
    box-shadow: 0 0 0 transparent; } 
 
}

<div class="test"></div>

Answer 2

,

/*portaal general*/ 
 
.portaal { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 200px; 
 
    border-radius: 50px/100px; 
 
    bottom: 60px; 
 
} 
 

 

 

 
/*portaal left*/ 
 
.portaal_links { 
 
    background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    transition: box-shadow ease-in-out; 
 
    transition-delay: 1s; 
 
    transition-duration: 1s; 
 
    box-shadow: 0 0 55px #57B6FF; 
 
    opacity: 0.75; 
 
    left: 50px; 
 
    animation:mvv 2s infinite; 
 
} 
 
@keyframes mvv{ 
 
    0%{ 
 
     box-shadow: 0 0 55px #57B6FF; 
 
    } 
 
    50%{ 
 
     box-shadow: 0 0 0px #57B6FF; 
 
    } 
 
} 
 

 
.portaal_rechts { 
 
    background: radial-gradient(ellipse at center, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
    box-shadow: 0 0 55px #FF6600; 
 
    opacity: 0.55; 
 
    left: 750px; 
 
    animation:mv 2s infinite; 
 
} 
 
@keyframes mv{ 
 
    0%{ 
 
     box-shadow: 0 0 55px #FF6600; 
 
    } 
 
    50%{ 
 
     box-shadow: 0 0 0px #FF6600; 
 
    } 
 
}

<div class="portaal portaal_links"></div> 
 
<div class="portaal portaal_rechts"></div>