CSS-анимация перемещение и изменение цвета

-2

Я не знаком с анимацией CSS. Мой клиент хочет достичь the following result при наведении contact кнопку:CSS-анимация перемещение и изменение цвета

так, чтобы быть ясно:

переместить каре слева направо и наоборот
когда квадрат движется, линия под ней меняется цвет

верхнее изображение это начальное состояние, середина - во время эффекта (50%), а нижнее изображение - конечная.

Является ли это достижимым только с CSS или мне также нужен JS? Как бы я подходил к этому?

источник

2016-07-28 Boris Kamp

Это достигается только с помощью css. можете ли вы поделиться своим кодом до сих пор? вы сами это пробовали? ты что-то застрял? Люди здесь будут рады помочь вам, но не писать код для вас с нуля :-) –

use css. js не требуется –

Ожидается, что вы, по крайней мере, попытаетесь запрограммировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы делаете некоторые [** дополнительные исследования **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали, и почему это не сработало. –

Я создал быстрый и грязный 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; это происходит постепенно.

Старайтесь не использовать мой код в качестве вашего последнего примера, так как он несколько уродлив. Но я надеюсь, что это будет иметь смысл.

источник

2016-07-28 09:40:53

Спасибо Митчел, результат, похоже, то, что я хочу достичь. Я буду копаться в том, как это работает после выходных и вернуться к вашему ответу. –

Привет Митчел, я прочитал ваш код и полностью понял, как он работает, умный, если вы спросите меня. Могу ли я узнать, почему вы думаете, что это не окончательный код? –

@BorisKamp В основном это немного грубо и неорганизованно. Это также не очень отзывчиво. Изменение размера каждого куба приведет к необходимости изменения большего количества значений. В общем, все неплохо, но немного очистить не повредит. –

Вот небольшая демонстрация перехода Css:

Рассмотрим этот HTML:

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

С помощью этого CSS:

.container { позиция: относительная; ширина: 400 пикселей; высота: 400px; border: solid 1px black; } .box { позиция: абсолютная; ширина: 40px; высота: 40px; верх: 10px; left: 10px; background-color: red; переход: все 1 с; } .контейнер: hover { border-color: blue; .box { наверх: 200px; Слева: 200px; ширина: 160px; высота: 160px; background-color: blue; }
}

Или проверить его на JsFiddle: https://jsfiddle.net/ronency/75ozjq3s/

источник

2016-07-28 09:39:49

CSS-анимация перемещение и изменение цвета

ответ

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