CSSとjQueryアニメーションの下部divが変形する

私は今日を作ろうとしています& jQuery、CSS、およびHtmlを使用した夜間アニメーション。CSSとjQueryアニメーションの下部divが変形する

下のスライダーをクリックしてアニメーションを実行すると、大きな円の下半分に半円のような水の部分が変形して四角形になります。問題は、あなたのCSSのコードである https:// jsfiddle.net/g0Lpzfqr/3/

あなたの時間-円が他の要素よりも小さかったが、私は他の要素を一致させるために、その幅と高さを変更します。あなたは今働いているのを見ることができます。他の解決策が必要な場合はコメントをしてください。 –

無料のWYSIWYG（あなたが見ているものはあなたのものです）エディタをあなたのCSSとHTMLコードで試してみてください。 http://www.hongkiat.com/blog/top-css-editors-reviewed/ –

助けてくれてありがとう:) –

：ここ

は私の一日&ナイトサイクルアニメーションのJsFiddle上のコードです。水のDivはアニメーション中に変形する理由よりも小さくなります。

それとも

は、あなたが簡単に解決策を望むなら、あなたが幅を変更する必要があります短い時間-円を一致させるために他のすべての要素の高さと幅を小さくすることができますし、あなたのCSSコードの.time-circleの高さを200pxから400pxに変更します。

.time-circle { 
    width: 400px; 
    height: 400px; 

}

あなたのediを確認してくださいここではJsfiddle：https://jsfiddle.net/ydus80wp/3/ 希望します。

2016-09-03 07:02:12

z-indexを使用すると、この問題を解決できます。水のクラスにz-index: 0;を追加してください。

チェックこのフィドルアウト： https://jsfiddle.net/Naderial/qnjumLqc/

2016-09-03 07:22:09

答えて