Вот ещё один Оригинальный эффект CSS, который создаёт движение, а движение — это как известно жизнь.
Я не стану подробно описывать свойства анимации и трансформации css, используемые в коде этого сердечка, так как для этого есть куча ресурсов, начиная с htmlbook.
Но должен отметить, что если Вы поиграете с числами, в значениях этих элементов, то увидите очень интересные эффекты, под которые можно подставить не только блоки в виде сердца, но и многое-многое другое.
Всё будет зависеть от Вашей фантазии. И это только css, без изображений.
Здесь я покажу работающее сердце. Состоит оно из двух блоков, и ко второму, снизу, добавлен треугольник, псевдоэлементом ::after.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
@keyframes bounce {
from, to {
-webkit-transform: translateY(10vh) scaleY(.98);
transform: translateY(10vh) scaleY(.98);
}
80% {
-webkit-transform: translateY(10vh) scaleY(1.02);
transform: translateY(10vh) scaleY(1.02);
}
}
.serdse {
border-radius: 9vw 11vw 1vw 20vw;
width: 120px;
height: 165px;
background-image: radial-gradient(ellipse farthest-corner at 0 0, #FF414A,#f00);
margin: 0 auto;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
float: left;
}
@keyframes bounce {
from, to {
-webkit-transform: translateY(10vh) scaleY(.98);
transform: translateY(10vh) scaleY(.98);
}
80% {
-webkit-transform: translateY(10vh) scaleY(1.02);
transform: translateY(10vh) scaleY(1.02);
}
}
.serdse1 {
border-radius: 15vw 11vw 25vw 1vw;
width: 120px;
height: 165px;
background-image: radial-gradient(ellipse farthest-corner at 100% 0%, #FF414A,#f00);
margin: 0 0 0 105px;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 0.50) infinite;
}
.serdse1::after {
content: '';
position: absolute;
left: -33px;
bottom: -50px;
border: 40px solid transparent;
border-top: 20px solid #f00;
}
</style>
</head>
<body>
<div class="serdse"></div>
<div class="serdse1"></div>
</body>
</html>
В этом коде кое что можно сгруппировать, и сократить его, и есть ещё один нюанс.
Свойство content псевдоэлемента ::after, каким-то образом, я ещё не разобрался почему, вступает в противоречие с пользовательской функцией.
Поэтому, для того чтобы разместить результат на странице WP, в функцию шорткода вставляется только html, а стили вставляются только в файл style.css.
Напомню, при добавлении своих стилей в файл, следите, чтобы названия селекторов, случайно не повторили уже имеющиеся в файле.
Желаю творческих успехов, ведь этот код предоставляет огромные возможности для творчества.
Перемена
Если тебе когда-нибудь захочется найти человека, который сможет преодолеть любую, самую невероятную беду и сделать тебя счастливым, когда этого не может больше никто — просто посмотри в зеркало и скажи: «Привет!»
Анимация CSS для начинающих
CSS перемещение, вращение, 3D
Плавающий блок CSS
Часы CSS
Вращающийся куб баннер CSS
Текст появляющийся на изображениях CSS
Блок перевёртыш CSS
Анимация для шапки сайта CSS
Логотип для сайта
Слайдер CSS
В раздел
Для всех, кого интересует веб программирование, прошу оценить новый редактор кода на
Конечно. Нет проблем.
Благодарю автора! Попробую наделать живых маркеров. Если что — не откажите в совете.