Question

这是实时版http://lucasdebelder.be/googledoodle/

首先，我有点想在不使用javascript / jquery的情况下修复它，我想保持纯HTML和＆amp;基于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; }
}

Javadoc 请注意在笔中我复制了整个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（）函数

我怎样才能在一个div上为这两个东西制作动画？

2 个答案: