3

CSSキーフレームアニメーションを使用してアニメーション化された背景色を持つ高さ不明の3つのdivがあると仮定します( 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; }
}

現在、白い背景を持つ他の 2 つの div があります。ホバーすると、これらの白い div に、永続的な色のアニメーションと同期するアニメーションの背景色も表示されます。ネイティブ同期がサポートされていないことは承知しています (複数の要素で CSS アニメーションを同期する方法を参照してください)。

私の最初のアプローチは、すべてアニメーション化された背景色を持つ 3 つの div を作成し、そのうちの 2 つを相対的に配置された白い 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 に対してこの効果を達成する他の方法はありますか?

4

2 に答える 2

6

アニメーションを実行する親コンテナー内に 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/

于 2013-07-19T11:13:55.320 に答える
0

これを試してみませんか：

#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/ ありがとう...

于 2013-07-18T10:57:50.150 に答える