Бьющееся сердце на CSS3

Доброго времени суток, уважаемый хабражитель! Сегодня я покажу Вам безграничные возможности CSS и научу при их помощи создать красивое пульсирующее сердце.

---

ШАГ 1: Пишем HTML документ

Приступим к работе. Начнём с написания HTML-кода. Для создания нашего сердца нужен всего лишь один пустой блочный элемент, которому мы дадим класс heart.

<div class="heart"></div>

Это всё, что нам понадобится сейчас.

---

ШАГ 2: Как нарисовать сердце?

По схеме приведённой на рисунке ниже мы будем рисовать наше сердце. Подробнее алгоритм прорисовки описан в следующих шагах.

---

ШАГ 3: Начинаем рисовать

Зададим нашему блоку размер 100х100px, красну рамку толщиной в 1 пиксель и уберём рамку сверху и слева. Для псевдо-элементов .heart:before и .heart:after мы зададим размеры 70х100px, такую же красную рамку в 1 пиксель, уберём рамку справа, а также заокруглим левый верхний и левый нижний углы радиусом 50px.

.heart {
	position: relative;
	width: 100px;
	height: 100px;
	border: solid 1px red;
	border-top: none;
	border-left: none;
}

.heart:before, .heart:after {
	position:absolute;
	content: ' ';
	-webkit-border-radius: 50px 0 0 50px; /* для Chrome и Safari */
	-moz-border-radius: 50px 0 0 50px; /* для Firefox */ 
	border-radius: 50px 0 0 50px;
	width: 70px;
	height: 100px;
	border: solid 1px red;
	border-right: none;
}

---

ШАГ 4: Появление сердца

В итоге у нас получилось несколько непонятных линий. Для того чтобы сделать из них нужное для нас сердце нужно сделать следующее:

• Повернуть псевдо-элемент .heart:after на 90^o используя свойство transform: rotate(90deg);
• Сместить псевдо-єлементы .heart:before и .heart:after так чтобы наш блочный элемент принял форму сердца;
• Повернуть блочный элемент на 45^o.

В результате у нас получится следующий код:

.heart {
	position: relative;
	width: 100px;
	height: 100px;
	-webkit-transform: rotate(45deg);  /* для Chrome и Safari */
	-moz-transform: rotate(45deg); /* для Firefox */ 
	-o-transform: rotate(45deg); /* для Opera */ 
	transform: rotate(45deg);
	border: solid 1px red;
	border-top: none;
	border-left: none;
}

.heart:before, .heart:after {
	position:absolute;
	content: ' ';
	-webkit-border-radius: 50px 0 0 50px;
	-moz-border-radius: 50px 0 0 50px;
	border-radius: 50px 0 0 50px;
	width: 70px;
	height: 100px;
	border: solid 1px red;
	border-right: none;
	left:-70px;
}
.heart:after {
	position: absolute;
	left: 15px;
	top: -85px;
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}

То что у нас получилось выглядит так:

---

ШАГ 5: Делаем фон

Чтобы наше сердце стало красивее мы рыскрасим его с помощью градиентов. Так как официально CSS3 не утверждён и ни один браузер его полностью не поддерживает, то градиенты я прописал отдельно для нескольких браузеров.
Градиент для тела самого блока:

.heart {
	background: red;
		/* для браузеров, которые не поддерживают градиент */
	background: -webkit-radial-gradient(115% 50%, 75px 110px, #8B0000, #8B0000, red);
		/* для Chrome и Safari */
	background: -moz-radial-gradient(170% 50%, circle , #8B0000 0%, #8B0000 52%,  red 76%);
		/* для Firefox */
	background: -o-radial-gradient(115% 50%, 75px 110px, #8B0000, #8B0000, red);
		/* для Opera */
	background: radial-gradient(115% 50%, 75px 110px, #8B0000, #8B0000, red);
		/* по стандартам CSS3 */
}

Гадиент для псевдо-элемента .heart:before:

.heart:before {
	background: red;
	background: -webkit-radial-gradient(15% 50%, 65px 65px, #FFE4E1, red);
	background: -moz-radial-gradient(15% 50%, circle, #FFE4E1, red 85%);
	background: -o-radial-gradient(15% 50%, 65% 65%, #FFE4E1, red);
	background: radial-gradient(15% 50%, 65% 65%, #FFE4E1, red);
}

Гадиент для псевдо-элемента .heart:before:

.heart:after {
	background: red;
	background: -webkit-radial-gradient(50% 80%, 85px 80px, #FFB6C1, red, #8B0000);
	background: -moz-radial-gradient(50% 80%, circle, #FFB6C1, red, #8B0000 90%);
	background: -o-radial-gradient(50% 80%, 85px 80px, #FFB6C1, red, #8B0000);
	background: radial-gradient(50% 80%, 85px 80px, #FFB6C1, red, #8B0000);
}

Градиенты подобраны лично мною методом научного тыка ;)
Браузеры, которые по каким то непонятным причинам не понимают CSS3-градиенты, будут видеть просто красное сердечко.

---

ШАГ 6: Заставим наше сердце биться

Теперь попытаемся заставить наше сердечко биться. В этом нам поможет чудесное свойство CSS3 — animation. В нём записывается название так называемого кейфрейма (в нём описано как изменяются стили элемента во время анимации), длительность анимации, количество повторений и т.п.
Чтобы указать браузеру что он должен анимировать наш элемент в классе .heart напишем:

.heart {
	animation-name: 'anime';
		/* имя кейфрейма для анимации */
	animation-duration: 300ms;
		/* длительность анимации */
	animation-iteration-count: infinite;
		/* количество повторений, в данном случае - бесконечно */
	animation-direction: alternate;
		/* проигрывать анимацию в прямом и в обратном порядке */
	animation-timing-function: ease-in;
		/* вычисление временных промежутков для анимации, в данном случае анимация ускоряется */
}

Теперь напишем наш кейфрейм для анимации. В нём мы напишем что элемент во время анимации должен увеличиваться в 1,1 раза, а потом возвращаться к исхожному размеру. Не забываем о том, что элемент мы повернули на 45^o.

@keyframes 'anime' {
	from {
		transform: scale(1) rotate(45deg);
	}
	to {
		transform: scale(1.1) rotate(45deg);
	}
}

---

ШАГ 7: Вопросы кроссбраузерности

Дело в том что браузеры пока что не поддерживают большинство нативных свойств CSS3, а имеют свои аналоги под своими названиями. Поэтому для многих свойств нам приходиться в начале писать префиксы типа -webkit- или -moz-.
Для разных браузеров свои префиксы:

• -webkit- для браузеров на движке Webkit (Chrome, Safari);
• -moz- для браузеров на движке Gecko (Firefox, SeaMonkey);
• -o- для браузеров на движке Presto (Opera, Nintendo DS Browser);

Для того чтобы наша анимация работала в разных браузерах (а работать она будет в Chrome, Safari 5 и Firefox), нам нужно блоки с анимацией написать с разными префиксами. Рассмотрим случай для браузера Google Chrome:

.heart {
	-webkit-animation-name: 'anime';
	-webkit-animation-duration: 300ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-timing-function: ease-in;
}

@-webkit-keyframes 'anime' {
	from {
		-webkit-transform: scale(1) rotate(45deg);
	}
	to {
		-webkit-transform: scale(1.1) rotate(45deg);
	}
}

Обратите внимание, что при написании кейфрейма для движков на движке Gecko, лапки в имени кейфрейма ставить не нужно.

---

Результат

Результат как по мне потрясающий: красиво, изящно, просто. Демо вы можете посмотреть тут.
Корректно будет работать в Mozilla Firefox 4.0+, Safari 4, Google Chrome 3.0+. В Opera начиная с версии 12 будут видны лишь градиенты.

P.S.: Мне кажеться, что данное сердечко будет отличным подарком девушке-айтишнице на День влюблённых. Как вы считаете?