Нижняя деформация div в CSS и анимация jQuery

Я пытаюсь сделать День & Ночной цикл анимации с jQuery, CSS и Html.Нижняя деформация div в CSS и анимация jQuery

Когда я запускаю анимацию, щелкнув ползунок внизу, часть воды, которая похожа на полукруг в нижней половине большого круга, деформируется в прямоугольник.

Вот код на JsFiddle мой день анимации & Ночной цикл: https:// jsfiddle.net/g0Lpzfqr/3/

источник

2016-09-03 cehoxameba-7267

Ваше время круга было меньше, чем другие элементы, которые я изменил свою ширину и высоту, чтобы соответствовать другим элементам. Теперь вы можете видеть его работу. Если вы хотите любое другое решение, сделайте комментарий, чтобы мы могли лучше помочь вам. –

Вы должны попробовать один из свободно доступных хороших WYSIWYG (что вы видите, что вы получаете) редактор для кода css и html, чтобы предотвратить такие проблемы. http://www.hongkiat.com/blog/top-css-editors-reviewed/ –

Спасибо за помощь :) –

Проблема заключается в коде CSS. Вода Div меньше, поэтому она деформируется во время анимации. Вы можете:

увеличить высоту и ширину только меньшего кругового времени в CSS, чтобы сделать его более крупным и соответствовать другим более крупным элементам.

Или

Вы можете уменьшить высоту и ширину всех остальных элементов, чтобы соответствовать меньшему временного кругу

Если вы хотите простое решение, то вы должны изменить ширину и высота круга .time-circle от 200px до 400px в вашем коде CSS, как показано ниже:

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

}

Проверьте, есть ли у вас edi ted 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

Нижняя деформация div в CSS и анимация jQuery

ответ

Смежные вопросы