Есть вот такая картинка. Надо чтобы она беспрерывно меняла цвет на желтый сверху вниз. Возможно ли это сделать и если да, то как?
-
Во-первых, пнг не может менять цвет сама по себе (без дублирования или ещё каких-то хитростей), во-вторых, что значит "беспрерывно"? У желтого цвета есть потолок желтезны. Я бы сказал, что тут без svg не обойдется– MedvedevDev5 апр 2017 в 16:28
-
@Khipster, если двигать, то она будет двигаться ... ты наверное имел ввиду наложить поверх и менять высоту. Но тогда не будет плавного перехода ... тут конечно зависит от конкретной задачи, тут мне кажется имеется ввиду все же плавный переход цвета– MedvedevDev5 апр 2017 в 16:31
-
@MedvedevDev попробую описать подробно....на странице размещается эта картинка, нужно сделать анимацию с помощью которой, картинка постепенно плавно сверху вниз будет заливаться желтым цветом. И нужно сделать так чтобы эта анимация повторялась– Nikita Knyazev5 апр 2017 в 16:36
-
@MedvedevDev Должна быть просто анимация– Nikita Knyazev5 апр 2017 в 16:38
-
@MedvedevDev да, картинка становится желтой, потом сверху вниз ставноится опять серой и по кругу– Nikita Knyazev5 апр 2017 в 16:39
4 ответа
Действительно задачка веселая ... да простят меня все кто увидит этот мой "шедевр", я честно старался ...
.icon {
position: relative;
width: 66px;
height: 77px;
height:
font-size: 0;
}
.icon_container {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 0;
min-height: 100%;
font-size: 0;
overflow: hidden;
animation: colorizeOut 1.5s linear infinite;
}
.icon_container__yellow {
top: 0;
bottom: auto;
animation: colorizeIn 1.5s linear infinite;
}
.icon_image {
position: absolute;
top: auto;
bottom: 0;
width: 100%;
}
.icon_container__yellow .icon_image {
top: 0;
bottom: auto;
}
@keyframes colorizeIn {
0% { min-height: 0; }
100% { min-height: 77px; }
}
@keyframes colorizeOut {
0% { min-height: 77px; }
100% { min-height: 0; }
}
<div class="icon">
<div class="icon_container">
<img src="//i.imgur.com/Ou00Phd.png" class="icon_image">
</div>
<div class="icon_container icon_container__yellow">
<img src="//i.imgur.com/yCnqsy6.png" class="icon_image">
</div>
</div>
-
Уже близко к истине. Вот только можете исправить чтобы после заливки желтым цветом, картинка сразу возвращалась в исходное состояние и затем снова окрашивалась в желтый 5 апр 2017 в 17:47
-
Ну ё маё, а я так долго именно с данным эффектом боролся .... ну нет так нет, хозяин - барин, сейчас поубираю лишнее 5 апр 2017 в 17:49
-
@Nikita Knyazev Убрал лишнее, теперь видимо то что нужно, но прежний вариант мне нравился больше, зря пытался его добиться ( 5 апр 2017 в 17:53
-
Поставил анимацию на 2.5 секунды и стало прям идеально. Спасибо большое и извините что помучил)) 5 апр 2017 в 17:58
-
@Nikita Knyazev на самом деле одна из самых нетривиальных задач за последние дни (хоть и кажется таково), было интересно, а самое крутое, что ещё пару интересных решений накидали ))) 5 апр 2017 в 17:59
Фух, знаешь, это было сложно. Я как-то искал уже такое, но не находил. А щас на 20 минут больше погуглил - и нашел.
Вся загвоздка в mask, у него плохая поддержка.
body {
margin: 0;
padding: 0;
}
div.wrapper-for-image {
position: relative;
}
div {
width: 66px;
height: 77px;
}
div.back {
position: absolute;
background: url(https://i.stack.imgur.com/7lSyw.png) no-repeat;
}
div.front {
position: absolute;
-webkit-mask: url(https://i.stack.imgur.com/7lSyw.png) no-repeat;
background: linear-gradient(yellow, #504f4f) no-repeat;
background-position: 0px -77px;
background-size: 100%;
transition: background-position 1s ease 0s, background-size 1s ease 0s;
}
div.front:hover {
background-position: 0px 0px;
background-size: 200%;
}
<div class="wrapper-for-image">
<div class="back"></div>
<div class="front"></div>
</div>
-
Спасибо! Можно было бы использовать если не плохая поддержка браузерами. И еще один момент, работает только при наведении. 5 апр 2017 в 17:27
-
@NikitaKnyazev, ну да, если бы не поддержка... А при чем тут наведение? Делай как угодно, я сделал ховер чисто чтобы показать, как оно работает. Можно и статическую анимацию повесить. 5 апр 2017 в 17:28
-
1
Можно просто сделать несколько версий цветовых этой картинки, и через Jquery сделать чтобы они менялись
Пример с использованием hue-rotate
.b{
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
position: relative;
}
.b:before{
content: '';
position: absolute; top: 0; left: 0;
z-index: 1;
width: 100%;
height: 0;
background: url(http://static.wixstatic.com/media/4b5ed0_f915a7d25461495bb9008e09fe48a446.png) no-repeat 0 0;
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
animation: animPicture 3s linear infinite;
}
@keyframes animPicture{
0{
height: 0;
}
99%{
-webkit-filter: hue-rotate(0);
filter: hue-rotate(0);
}
100%{
height: 100%;
}
}
<div class="b">
<img src="http://static.wixstatic.com/media/4b5ed0_f915a7d25461495bb9008e09fe48a446.png" alt="" />
</div>
Также как вариант сделать 2 картинки и анимировать их.
-
А как сделать желтый цвет? Не нашел, где вы задали значение цвета 5 апр 2017 в 17:32
-