如何在一个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（）函数时，你想不悬停事件