Question

假设我有三个未知高度的div，其中一个使用CSS关键帧动画获得动画背景颜色（参见http://css-tricks.com/color-animate-any-shape-2）

@-webkit-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}
@-moz-keyframes super-rainbow {
  0%   { background: #ffff00; } 
  20%  { background: #ffcd00; }
  40%  { background: #c3d74b; }
  60%  { background: #c3d7d7; }
  80%  { background: #ffc39b; }
  100% { background: #ffff00; }
}

现在，还有另外两个具有白色背景的div。在悬停时，我希望那些白色div具有动画背景颜色，与永久颜色动画同步。我知道不支持原生同步（请参阅How To Sync CSS Animations Across Multiple Elements?）。

我的第一种方法是让三个div都具有动画背景颜色，并覆盖其中两个白色div，相对定位。在悬停时，那些白色div将变为透明并显示带有动画背景的div（参见http://jsfiddle.net/Vzq4B）

#permanent {
    height: 100px;
    margin-bottom: 15px;
    width: 100%;
    -webkit-animation: super-rainbow 5s infinite linear; 
       -moz-animation: super-rainbow 5s infinite linear;
}
#hover {
    position: relative;
    top: -115px;
    margin-bottom: -100px;
    height: 100px;
    width: 100%;
    background: #fff;
}
#hover:hover {
    background-color: transparent;
}

但是，这种方法只有在我知道元素的高度时才会起作用，因为内容是可变的，所以我不知道。

有哪些其他方法可以为未知高度的div实现此效果？

Answer 1

尝试将DIV放在运行动画的父容器中。然后，子容器可以容纳内容并具有白色背景，在悬停时使用CSS将其变为透明。

HTML：

<div id="container">
   <div id="child">Your content.</div>
</div>

CSS：

#container { animation: super-rainbow 5s infinite linear; }
#child {background-color: white;}
#child:hover {background-color: transparent;}

这是一个小提琴http://jsfiddle.net/bejnar/Vzq4B/4/

Answer 2

你为什么不试试这个：

#hover:hover {
     height: auto;
    width: 100%;
    outline: 1px solid #999; /* only style */
    -webkit-animation: super-rainbow 5s infinite linear; 
       -moz-animation: super-rainbow 5s infinite linear;
    cursor: pointer;
}

有一个链接：http://jsfiddle.net/nmL9s/ 感谢...

同步CSS关键帧颜色动画

2 个答案: