我怎样才能让CSS动画

我有2个图像和一个背景：（红色和棕色是图像）我怎样才能让CSS动画

（白色背景）

当我将鼠标悬停在第一张或第二张图像将滑动到左侧/右侧。就像店里的门一样。同时滑动两个（不只一个）。

有人可以帮助我吗？谢谢。

来源

2017-04-10 Giacomo

什么编码你试过没有工作？请张贴您现有的努力，以便我们可以帮助您提高您的能力。 – DACrosby

如果你是一年中的活跃成员，那么现在你应该知道，人们通常喜欢在你自己的第一次看到某种最小尝试，而不是仅仅为你做你的工作。我们在这里互相帮助，但不是免费的代码服务。对？ –

我试图接受的答案，但它是一个有点马车（在Firefox更是这样），如果你把你的光标放在中心，它反弹的两侧来回打不开。就我个人而言，我会做更多这样的事情。

CODEPEN TO PLAY WITH

#stage { 
 
    width: 20rem; 
 
    height: 15rem; 
 
    background: green; 
 
    border: black 1px solid; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    cursor: pointer; 
 
} 
 

 
span { 
 
    color: white; 
 
    font-size: 150%; 
 
} 
 

 
#left-curtain, #right-curtain { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 10rem; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
#left-curtain { 
 
    background: red; 
 
    left: 0; 
 
} 
 

 
#right-curtain { 
 
    background: blue; 
 
    right: 0; 
 
} 
 

 
#stage:hover #left-curtain { 
 
    left: -10rem; 
 
} 
 

 
#stage:hover #right-curtain { 
 
    right: -10rem; 
 
}

<div id="stage"> 
 
    <span>PEEK - A - BOO!</span> 
 
    <div id="left-curtain">Mouse</div> 
 
    <div id="right-curtain">Over</div> 
 
</div>

来源

2017-04-10 17:59:07

这是一个更好的，但一个问题是，我只需要改变图像的大小（红/蓝）就像一个答案。：P – Giacomo

这只是一个概念示例。现在你已经有了一个开始的地方，在一个单独的问题中带有特定的问题。 –

这是我的快速和肮脏的解决方案。这并不完美，也许别人可以微调它 - 但它是有效的。 Javascript/jQuery可能允许你提出一个更完整的解决方案。

希望这会有所帮助。

.l, 
 
.r { 
 
    -webkit-transition: width .35s ease-in-out; 
 
    transition: width .35s ease-in-out; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
.container { 
 
    width: 400px; 
 
} 
 

 
.l { 
 
    background-color: red; 
 
    float: left; 
 
} 
 

 
.r { 
 
    background-color: brown; 
 
    float: right; 
 
} 
 

 
.container:hover div { 
 
    width: 150px; 
 
}

<div class='container'> 
 
    <div class='l'> 
 
    </div> 
 
    <div class='r'> 
 
    </div> 
 
</div>

来源

2017-04-10 17:42:29 blackandorangecat

我怎样才能让CSS动画

回答

相关问题