CSS动画移动和改变颜色

问题描述：

我不熟悉CSS动画。我的客户想要达到the following result徘徊在contact按钮时：CSS动画移动和改变颜色

所以要清楚：

方的举动由左到右，反之亦然
当方移动，线下它的变化颜色

顶部图像它是开始状态，中间是效果期间（50％），底部图像是结束阶段。

这是可以实现的只有CSS或我是否也需要JS？我会如何解决这个问题？

它只能通过CSS实现。你可以分享你的代码到目前为止？你自己尝试过吗？你有什么东西吗？这里的人将很乐意为您提供帮助，但不要从头为您编写代码:-) –

使用css。 js不需要 –

预计您至少会尝试为自己编写代码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），无论是通过谷歌或通过搜索，尝试和。如果您仍然遇到麻烦，请返回**您的代码**并解释您尝试过的以及为什么它不起作用。 –

答

我创建了一个快速和肮脏的jsfiddle这里：https://jsfiddle.net/x0b397pb/

正如你所看到的，也可以只用CSS。在这个例子中，我使用伪元素（::before和::after）来创建大部分元素。

你提到“我不熟悉CSS动画”。 For this I used transitions.

transition: left 1000ms, right 1000ms, box-shadow 1000ms;

每个逗号分隔元件是将2个点之间转换的值。此转换发生在div的更改上，这可以在悬停时进行，也可以在应用另一个div时（通过JS）进行。

为了创建颜色渐变的线条效果，我使用了另一个在原始两行上滑动的元素。新的线最初有0宽度，但在悬停时它们获得100％的宽度。随着转换transition: width 1000ms;这种情况逐渐发生。

尽量不要使用我的代码作为最后的例子，因为它有点难看。但我希望它能得到重点。

谢谢米切尔，结果似乎是我想要的实现。我将深入了解周末后的工作情况，并回复您的回答。 –

嗨Mitchel，我读了你的代码，并且完全理解它是如何工作的，如果你问我，就写得很聪明。请问我为什么认为这不是最终的代码准备？ –

@BorisKamp这主要是因为它有点粗糙和无组织。它也不完全响应。更改每个立方体的大小将导致必须更改更多值。总而言之，这不是太糟糕，但是一点清理工作不会受到伤害。 –

答

这里是CSS过渡的一个小示范：

考虑这个HTML：

<div class="container"> 
    <div class="box"></div> 
</div>

利用该CSS：

.container { 位置：相对; width：400px; height：400px; 边框：实心1px黑色; } .box {position：absolute; width：40px; height：40px; top：10px; left：10px; background-color：red; transition：all 1s; } .container：hover { border-color：blue; .box { top：200px; left：200px; width：160px; height：160px; background-color：blue; }
}

或者，检查它的jsfiddle：https://jsfiddle.net/ronency/75ozjq3s/

CSS动画移动和改变颜色

相关推荐