我如何在一个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; }
}

笔在这里请注意，在笔中，我复制了整个css电子表格并将其放在css部分中

Answer 2

并且您可以在需要时调用 change_style(( 函数，而无需悬停事件