#html #jquery #css #animation #svg
#HTML #jquery #css #Анимация #svg
Вопрос:
Я использую анимацию CSS для отображения разных изображений на основе цвета фона, но положение изображения не должно изменяться, а анимация цвета фона должна выполняться снизу вверх с заливкой цветом фона, я должен видеть соответствующее изображение для этого конкретного цвета фона при наведении.
HTML
div class="card">
<div class="card-img">
<div>
<img src="../../images/assets/kidney_empty.svg" alt="">
</div>
<div>
<img src="../../images/assets/kidneys_rev.svg" alt="">
</div>
</div>
<div class="card-body">
<div class="content-selector-wrapper">
<paragraph>
<p><strong>Renal manifestations</strong> can progress to kidney failure.</p>
</paragraph>
</div>
</div>
</div>
CSS
.mult-image-animation {
text-align : center;
}
.mult-image-animation .card-img {
width : 150px;
height : 150px;
border-radius : 50%;
overflow : hidden;
margin-bottom : 35px;
position : relative;
margin-left : auto;
margin-right : auto;
}
.mult-image-animation .card-img > div {
position : absolute;
width : 150px;
height : 150px;
margin-left : auto;
margin-right : auto;
padding : 40px 30px;
max-width : 100%;
top : 0;
bottom : 0;
right : 0;
left : 0;
margin : auto;
height : 150px;
-webkit-transition : all ease 3s;
-moz-transition : all ease 3s;
transition : all ease 3s;
}
.mult-image-animation .card-img div:first-child {
z-index : 1;
}
.mult-image-animation .card-body {
padding : 0;
font-size : 18px;
color : #4D4D4F;
font-family : "Merriweather", Helvetica, Arial, sans-serif;
}
.mult-image-animation .card-body strong {
font-family : "Merriweather-Bold", Helvetica, Arial, sans-serif;
}
.mult-image-animation.trigger-animation .card-img div:last-child {
box-shadow : inset 0 -70px 0 0 #EA1010;
z-index : 5;
}
Я могу получить анимацию и фоновое изображение, но при наведении курсора мыши оно скрывает предыдущее изображение, но я хочу, чтобы предыдущее изображение скрывалось по завершении перехода. Где я должен иметь возможность видеть как контур, так и сплошное изображение, подобное этому
https://jsfiddle.net/prasadau1989/m9abLo4f/JS
Изображение скрипки Есть ли у меня способ добиться этого в SVG? https://jsfiddle.net/prasadau1989/m9abLo4f/1 /
Любое руководство высоко ценится.
Ответ №1:
Вы на самом деле довольно близки, и SVG был отличной идеей! Использование SVG позволяет легко менять цвет заливки на элементе, как вы хотите, в зависимости от контекста.
По сути, вы хотите дважды создать один и тот же элемент с инвертированными цветами, но вообще не связывайтесь z-index . Вместо этого создайте clip-path для состояния наведения, уже настроенное на полное обрезание сверху:
.mult-image-animation .card-img > div:last-child {
clip-path: inset(100% 0% 0% 0%);
}
Затем при наведении курсора установите это 100% значение обратно 0% , чтобы создать анимацию, в которой она появляется, анимация начинается внизу, как вы описали.
Вот оно, все вместе взятое:
:root {
--static-color: #fff;
--accent-color: #ea1010;
}
.mult-image-animation {
text-align: center;
}
.mult-image-animation .card-img {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 35px;
position: relative;
margin-left: auto;
margin-right: auto;
box-shadow: inset 0 0 0 4px var(--accent-color);
}
.mult-image-animation .card-img > div {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding: 15px;
transition: all 0.5s ease-out;
box-sizing: border-box;
overflow: hidden;
z-index: -1;
}
.mult-image-animation .card-img > div:first-child {
background-color: var(--static-color);
}
.mult-image-animation .card-img > div:first-child > svg {
fill: var(--accent-color);
}
.mult-image-animation .card-img > div:last-child {
background-color: var(--accent-color);
-webkit-clip-path: inset(100% 0% 0% 0%);
clip-path: inset(100% 0% 0% 0%);
}
.mult-image-animation .card-img > div:last-child > svg {
fill: var(--static-color);
}
.mult-image-animation .card-body {
padding: 0;
font-size: 18px;
color: #4D4D4F;
font-family: "Merriweather", Helvetica, Arial, sans-serif;
}
.mult-image-animation .card-body strong {
font-family: "Merriweather-Bold", Helvetica, Arial, sans-serif;
}
.mult-image-animation:hover .card-img div:last-child {
-webkit-clip-path: inset(0% 0% 0% 0%);
clip-path: inset(0% 0% 0% 0%);
}
img {
max-width: 100%;
} <div class="mult-image-animation">
<div class="card">
<div class="card-img">
<div>
<svg width="100px" height="100px" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m50 11.668c-1.25 0-2.082 0.83203-2.082 2.082v72.293c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-72.293c0-1.043-0.83203-2.082-2.082-2.082z" />
<path d="m100 33.75c-0.20703-10.418-3.332-18.125-9.375-22.707-9.375-7.5-22.293-4.793-22.5-4.5859-3.957 0.83203-11.043 5.418-13.75 12.5-1.457 3.75-1.875 9.375 2.918 16.043 2.293 3.125 8.332 4.793 11.875 8.543l-1.25 0.20703c-5.418 1.043-9.582 5.832-9.582 11.457v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-37.289c0-3.543 2.5-6.668 6.043-7.293l2.5-0.41797c0.625 2.918 0 5.832-1.668 8.125-6.25 8.332-0.83203 20.832 13.332 20.832 3.957 0 8.75-1.668 12.5-9.168 3.9609-7.0781 5-21.871 4.793-33.328zm-8.332 31.457c-4.582 8.543-9.375 7.082-13.957 6.043-5.832-1.457-8.543-8.332-4.793-13.125 2.5-3.332 3.332-7.5 2.5-11.668-0.20703-0.83203-0.41797-1.668-0.83203-2.293-3.125-6.668-11.875-8.957-13.75-11.457-2.918-4.168-3.75-8.125-2.293-12.082 1.875-6.043 7.9141-9.582 10.625-10.207 4.793-1.043 13.332-0.625 18.957 3.75 5 3.957 7.707 10.418 7.707 19.582 0.21094 10.625-0.83203 25-4.1641 31.457z" />
<path d="m31.875 6.457c-0.20703 0-13.125-2.9141-22.5 4.5859-6.043 4.793-9.168 12.5-9.375 22.707-0.20703 11.457 0.83203 26.25 4.582 33.332 3.957 7.293 8.543 9.168 12.5 9.168 13.957 0 19.582-12.5 13.332-20.832-1.668-2.293-2.293-5.207-1.668-8.125 2.082 0.41797 8.543 1.043 8.543 7.707v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082l0.003906-37.082c0-5.207-3.332-10.207-10.625-11.668 3.543-3.75 9.582-5.418 11.875-8.543 4.793-6.668 4.168-12.293 2.918-16.043-2.707-6.8711-9.793-11.453-13.75-12.289zm7.5 25.836c-2.082 2.707-12.5 5.418-14.582 13.75-1.043 4.168 0 8.543 2.5 11.668 3.543 4.582 1.457 11.457-5.207 13.332-4.375 1.043-9.168 2.293-13.543-6.043-3.332-6.25-4.375-20.832-4.168-31.25 0.20703-9.168 2.707-15.625 7.707-19.582 5.832-4.582 14.168-4.793 18.957-3.75 2.5039 0.625 8.543 4.1641 10.629 9.7891 1.457 3.9609 0.625 8.125-2.293 12.086z" />
</g>
</svg>
</div>
<div>
<svg width="100px" height="100px" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m50 11.668c-1.25 0-2.082 0.83203-2.082 2.082v72.293c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-72.293c0-1.043-0.83203-2.082-2.082-2.082z" />
<path d="m100 33.75c-0.20703-10.418-3.332-18.125-9.375-22.707-9.375-7.5-22.293-4.793-22.5-4.5859-3.957 0.83203-11.043 5.418-13.75 12.5-1.457 3.75-1.875 9.375 2.918 16.043 2.293 3.125 8.332 4.793 11.875 8.543l-1.25 0.20703c-5.418 1.043-9.582 5.832-9.582 11.457v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082v-37.289c0-3.543 2.5-6.668 6.043-7.293l2.5-0.41797c0.625 2.918 0 5.832-1.668 8.125-6.25 8.332-0.83203 20.832 13.332 20.832 3.957 0 8.75-1.668 12.5-9.168 3.9609-7.0781 5-21.871 4.793-33.328zm-8.332 31.457c-4.582 8.543-9.375 7.082-13.957 6.043-5.832-1.457-8.543-8.332-4.793-13.125 2.5-3.332 3.332-7.5 2.5-11.668-0.20703-0.83203-0.41797-1.668-0.83203-2.293-3.125-6.668-11.875-8.957-13.75-11.457-2.918-4.168-3.75-8.125-2.293-12.082 1.875-6.043 7.9141-9.582 10.625-10.207 4.793-1.043 13.332-0.625 18.957 3.75 5 3.957 7.707 10.418 7.707 19.582 0.21094 10.625-0.83203 25-4.1641 31.457z" />
<path d="m31.875 6.457c-0.20703 0-13.125-2.9141-22.5 4.5859-6.043 4.793-9.168 12.5-9.375 22.707-0.20703 11.457 0.83203 26.25 4.582 33.332 3.957 7.293 8.543 9.168 12.5 9.168 13.957 0 19.582-12.5 13.332-20.832-1.668-2.293-2.293-5.207-1.668-8.125 2.082 0.41797 8.543 1.043 8.543 7.707v37.082c0 1.25 0.83203 2.082 2.082 2.082s2.082-0.83203 2.082-2.082l0.003906-37.082c0-5.207-3.332-10.207-10.625-11.668 3.543-3.75 9.582-5.418 11.875-8.543 4.793-6.668 4.168-12.293 2.918-16.043-2.707-6.8711-9.793-11.453-13.75-12.289zm7.5 25.836c-2.082 2.707-12.5 5.418-14.582 13.75-1.043 4.168 0 8.543 2.5 11.668 3.543 4.582 1.457 11.457-5.207 13.332-4.375 1.043-9.168 2.293-13.543-6.043-3.332-6.25-4.375-20.832-4.168-31.25 0.20703-9.168 2.707-15.625 7.707-19.582 5.832-4.582 14.168-4.793 18.957-3.75 2.5039 0.625 8.543 4.1641 10.629 9.7891 1.457 3.9609 0.625 8.125-2.293 12.086z" />
</g>
</svg>
</div>
</div>
<div class="card-body">
<div class="content-selector-wrapper">
<paragraph>
<p><strong>Renal manifestations</strong> can progress to kidney failure.</p>
</paragraph>
</div>
</div>
</div>
</div> Я надеюсь, что это поможет! Не стесняйтесь задавать мне любые дополнительные вопросы в комментариях. Приветствия!
Комментарии:
1. Есть ли способ поддержать это в IE или Firefox? потому что это решение работает только в Chrome
2. Да, я использую autoprefixer, поэтому я забыл включить префикс поставщика для webkit. Пожалуйста, добавьте
-webkit-clip-path: inset(100% 0% 0% 0%);и-webkit-clip-path: inset(0% 0% 0% 0%);соответственно (включите обаclip-pathи-webkit-clip-pathдля обоих. Это должно работать во всех современных браузерах (включая Edge, но не IE). Вы можете протестировать его в Firefox здесь (запустив autoprefixer): codepen.io/brandonmcconnell/pen /…3. Я скорректировал CSS в своем решении выше, чтобы отразить префикс
-webkit-clip-pathпоставщика. Я надеюсь, что это поможет! Если это работает для вас, пожалуйста, примите мой ответ на этот вопрос 🙂 В противном случае я все еще доступен, чтобы помочь разобраться в любых дальнейших проблемах в моем предоставленном решении.