Эффект пульсации для формы сердца css3
я пытаюсь реализовать эффект пульсации, подобный следующему
поскольку приведенный выше код хорошо работает только для круглых или квадратных форм, можем ли мы каким-либо образом добиться такого же эффекта для формы сердца svg?
<svg class = "heart" preserveAspectRatio = "xMidYMid meet" viewbox = "0 0 20 20"><path d = "M8.612,2.347L8,2.997l-0.612-0.65c-1.69-1.795-4.43-1.795-6.12,0c-1.69,1.795-1.69,4.706,0,6.502l0.612,0.65L8,16 l6.12-6.502l0.612-0.65c1.69-1.795,1.69-4.706,0-6.502C13.042,0.551,10.302,0.551,8.612,2.347z" fill = "#fff" transform = "scale( 0.954929658551372 )"></path></svg>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
359
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Самым быстрым решением было бы поменять местами box-shadow на filter: drop-shadow. Это будет работать для произвольных форм.
Однако это решение не совсем идеально; box-shadow / drop-shadow дорого анимировать. Вместо этого вы можете использовать transform: scale и opacity, например:
@keyframes pulsing {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(3);
}
}
.element {
animation: pulsing 1000ms ease-out;
}
Ответ принят как подходящий
Другим подходом может быть анимация ширины обводки.
svg {
width: 40px;
margin: 40px;
overflow: visible;
}
use {
stroke: red;
opacity: 0;
animation: pulsing 1000ms ease-out infinite;
}
@keyframes pulsing {
from {
opacity: 0.5;
stroke-width: 0;
}
to {
opacity: 0;
stroke-width: 12px;
}
}
.element {
animation: pulsing 1000ms ease-out;
}<svg class = "heart" preserveAspectRatio = "xMidYMid meet" viewbox = "0 0 20 20">
<use xlink:href = "#shape"/>
<path id = "shape" d = "M8.612,2.347L8,2.997l-0.612-0.65c-1.69-1.795-4.43-1.795-6.12,0c-1.69,1.795-1.69,4.706,0,6.502l0.612,0.65L8,16 l6.12-6.502l0.612-0.65c1.69-1.795,1.69-4.706,0-6.502C13.042,0.551,10.302,0.551,8.612,2.347z" fill = "#f00" transform = "scale( 0.954929658551372 )"></path>
</svg>Другие вопросы по теме
Невозможно настроить основное приложение asp.net на полную ширину
Зачем отображать разрывы встроенных блоков, overflow-wrap: break-word
Как сделать так, чтобы высота стола соответствовала размеру экрана?
Как создать определенную тень прокрутки css?
Край - не могу центрировать текст по горизонтали и вертикали
Как различать кнопки с одинаковым className
Javascript: как я могу отобразить общую стоимость введенных в него значений?
Веб-сайт выглядит по-разному в Chrome и Safari
Как получить абсолютный путь css из URL-адреса веб-страницы в Java?
Файл CSS применяется к другому компоненту реакции даже без импорта
Похожие вопросы
Невозможно настроить основное приложение asp.net на полную ширину
Проверка, при которой «ставка» не должна превышать текущий кошелек
Зачем отображать разрывы встроенных блоков, overflow-wrap: break-word
Как сделать так, чтобы высота стола соответствовала размеру экрана?
Разобрать значение html в python
Я сделал этот маленький калькулятор, но он не показывает результат
Край - не могу центрировать текст по горизонтали и вертикали
Не удается нажать кнопку отправки с помощью Selenium
Как различать кнопки с одинаковым className
Vue js: как скрыть кнопку
Сердце с пульсирующей анимацией: youtu.be/Jq4diUd10Zs