如何在一个 div 上为这两个东西设置动画？

Question

这是现场版http://lucasdebelder.be/googledoodle/

首先我有点想在不使用 javascript/jquery 的情况下修复它，我想保持它基于纯 HTML 和 CSS :)

专注于传送门，我想让它们在我的 ufo 通过它们后打开和缩小。我已经尝试了多种方法，但它不想工作。如何在不使用 :hover 语句的情况下进行转换？我有一个发光的，它上面已经有盒子阴影，使它看起来具有交互性，但是我怎样才能让它们缩小呢？

（Portaal 代表门户，links 代表左，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; }
}

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() 函数