如何在一個div上動畫這兩個東西？

Question

這裏是一個真人版的http://lucasdebelder.be/googledoodle/

首先我還挺想解決它不使用JavaScript/jQuery的，我希望保持它的純HTML &基於CSS的:)

專注於門戶網站，我希望在我的飛碟通過後讓它們開放並縮小。我已經嘗試過多件事但它不想工作。如何在不使用hover語句的情況下進行轉換？我有一個發光的，這是已經在它上面的盒子陰影，使它看起來互動，但我怎麼能讓它們縮小？

（Portaal代表的門戶網站，鏈接代表左，rechts代表權，這是荷蘭）

HTML：

<!-- portaal links en rechts --> 
      <div class="portaal portaal_links_glow"></div> 
      <div class="portaal portaal_rechts_glow"></div> 

CSS：

/*portaal algemeen*/ 
.portaal { 
    position: absolute; 
    width: 100px; 
    height: 200px; 
    border-radius: 50px/100px; 
    bottom: 315px; 
} 
/*portaal links*/ 
.portaal_links_glow { 
    background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    opacity: 0.75; 
    left: 50px; 
    animation-name: animation_portaal_glow_links; 
    animation-delay: 1s; 
    animation-duration: 4s; 
    animation-iteration-count: 2; 
    animation-timing-function: ease-in-out; 
} 
/*portaal rechts*/ 
.portaal_rechts_glow { 
    background: radial-gradient(ellipse at center, rgba(237,160,118,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    opacity: 0.65; 
    left: 750px; 
    animation-name: animation_portaal_glow_rechts; 
    animation-delay: 1s; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
} 
/*portaal glow animatie LINKS*/ 
@keyframes animation_portaal_glow_links { 
    0% { box-shadow: 0 0 0px #57B6FF; } 
    50% { box-shadow: 0 0 55px #57B6FF; } 
    100% { box-shadow: 0 0 0px #57B6FF; } 
} 
/*portaal glow animatie rechts*/ 
@keyframes animation_portaal_glow_rechts { 
    0% { box-shadow: 0 0 0px #ea2803; } 
    50% { box-shadow: 0 0 55px #ea2803; } 
    100% { box-shadow: 0 0 0px #ea2803; } 
} 

感謝所有努力和時間。

Answer 1

用css只

代替你關鍵幀@keyframes animation_portaal_glow_links和animation_portaal_glow_rechts和類別.portaal_links_glow和.portaal_rechts_glow以下代碼在下面

.portaal { 
    position: absolute; 
    width: 100px; 
    height: 200px; 
    border-radius: 50px/100px; 
    bottom: 315px; 
} 
/*portaal links*/ 
.portaal_links_glow { 
    background: radial-gradient(ellipse at center, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    opacity: 0.75; 
    left: 50px; 
    animation-name: animation_portaal_glow_links; 
    animation-delay: 5s; 
    animation-duration: 4s; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
    animation-fill-mode:forwards; 
} 

/*portaal rechts*/ 
.portaal_rechts_glow { 
    background: radial-gradient(ellipse at center, rgba(237,160,118,1) 0%,rgba(241,116,50,1) 50%,rgba(234,85,7,1) 51%,rgba(251,149,94,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    opacity: 0.65; 
    left: 750px; 
    animation-name: animation_portaal_glow_links; 
    animation-delay: 12s; 
    animation-duration: 4s; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-in-out; 
animation-fill-mode:forwards; 
} 
/*portaal glow animatie LINKS*/ 
@keyframes animation_portaal_glow_links { 
    0% { box-shadow: 0 0 0px #57B6FF; } 
    50% { box-shadow: 0 0 55px #57B6FF; } 
    100% { box-shadow: 0 0 0px #57B6FF; opacity:0;width:0;height:0} 
} 
/*portaal glow animatie rechts*/ 
@keyframes animation_portaal_glow_rechts { 
    0% { box-shadow: 0 0 0px #ea2803; } 
    50% { box-shadow: 0 0 55px #ea2803; } 
    100% { box-shadow: 0 0 0px #ea2803; } 
} 

0在筆

pen is here 注意我複製你的整個CSS表格，並將其放置在CSS部分

Answer 2

你可以用它來收縮門戶：

transform: scale(0.2); 
transition: 0.3s; 

或也許這：/

background-size: 100%; 
/* background-size: 50%; */ 
background-repeat: no-repeat; 
background-position: 50% 50%; 
transition: 0.3s; 

我不知道如何得到它的全功能HTML + CSS：/ 但你可以使用js在需要時設置新樣式

例如，在您的HTML頁面上，您可以在下面添加以下內容：

個

<style> 

/*the closing animation of the portal*/ 

.portal_style1 { 
    /*your code ...*/
    animation: animation1; 
} 

.portal_style2 { 
    /*your code ...*/
    animation: animation2; 
} 

</style> 

的JS：

function change_style(){ 
    var obj=document.getElementById("portal2"); 
    obj.className=".portal_style2"; 

} 

，你可以調用change_style（）函數時，你想不懸停事件