#JavaScript #Html #CSS #Анимация
Создание анимации — отличный способ изучить основные понятия Html, Css и JavaScript. Анимации можно использовать для выделения важной информации, направления пользователей по веб-сайту и создания уникального игривого дизайна. Одной из популярных анимаций является сердечная анимация, которая часто используется, чтобы добавить нотку романтики или игривости на веб-сайт.
- Создание сердечных анимаций с использованием HTML, CSS и JavaScript — это простой процесс, который может выполнить любой человек, имеющий базовые знания в области веб-разработки.
- Анимацию сердца можно настроить в соответствии с вашими потребностями, хотите ли вы создать тонкий и элегантный эффект или смелую и игривую анимацию.
- Следуя шагам, описанным в этом руководстве, вы сможете создать собственную анимацию сердца, которая привлечет внимание ваших посетителей и добавит уникальности вашему веб-сайту.
Создание анимации
- Сначала создайте папку с файлом Html, Css и JavaScript с именами index.html, style.css и script.js.
- Поместите все файлы в одну папку.
После этого напишите код:
HTML-КОД
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div id="header-plugin"></div> <div class="bg_heart"></div> <script src="script.js"></script> </body> </html>
CSS-КОД
html,body{ height:100% } .bg_heart { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden } .heart { position: absolute; top: -50%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -m-transform: rotate(-45deg); transform: rotate(-45deg) } .heart:before { position: absolute; top: -50%; left: 0; display: block; content: ""; width: 100%; height: 100%; background: inherit; border-radius: 100%; } .heart:after { position: absolute; top: 0; right: -50%; display: block; content: ""; width: 100%; height: 100%; background: inherit; border-radius: 100%; } @-webkit-keyframes love { 0%{top:110%} } @-moz-keyframes love { 0%{top:110%} } @-ms-keyframes love { 0%{top:110%} } @keyframes love { 0%{top:110%} }
Пояснение
html,body{ height:100% }
Это устанавливает высоту элементов HTML и body на 100%, что гарантирует, что фоновая анимация сердца заполнит всю страницу.
.bg_heart { position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
Это создает контейнер для анимации сердца с относительной позицией и шириной и высотой 100%. Свойство overflow: hidden
гарантирует, что любые переполняющие элементы будут скрыты.
.heart { position: absolute; top: -50%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -m-transform: rotate(-45deg); transform: rotate(-45deg); }
Это создает форму сердца, позиционируя абсолютно позиционированный элемент с верхним значением -50% (чтобы расположить его вне контейнера) и поворачивая его на 45 градусов, чтобы создать форму ромба. Различные префиксы поставщиков для свойства преобразования обеспечивают кросс-браузерную совместимость.
.heart:before { position: absolute; top: -50%; left: 0; display: block; content: ""; width: 100%; height: 100%; background: inherit; border-radius: 100%; } .heart:after { position: absolute; top: 0; right: -50%; display: block; content: ""; width: 100%; height: 100%; background: inherit; border-radius: 100%; }
Эти псевдоэлементы создают две половины формы сердца. Элемент :before
расположен в верхнем левом углу сердца и имеет радиус границы 100%, а элемент :after
расположен в верхнем правом углу сердца и также имеет радиус границы 100%.
@-webkit-keyframes love { 0%{top:110%} } @-moz-keyframes love { 0%{top:110%} } @-ms-keyframes love { 0%{top:110%} } @keyframes love { 0%{top:110%} }
Это ключевые кадры анимации движения сердца. Свойство top:110%
ключевого кадра 0%
устанавливает начальное положение анимации сердца, при этом сердце располагается под контейнером. Затем анимация будет перемещать сердце вверх, пока оно не достигнет верхней части контейнера. Различные префиксы поставщиков обеспечивают кросс-браузерную совместимость.
КОД JAVASCRIPT
// Define a function that creates a heart element with random properties function createHeart() { const heart = document.createElement('div'); heart.classList.add('heart'); heart.style.width = `${Math.floor(Math.random() * 65) + 10}px`; heart.style.height = heart.style.width; heart.style.left = `${Math.floor(Math.random() * 100) + 1}%`; heart.style.background = `rgba(255, ${Math.floor(Math.random() * 25) + 100 - 25}, ${Math.floor(Math.random() * 25) + 100}, 1)`; const duration = Math.floor(Math.random() * 5) + 5; heart.style.animation = `love ${duration}s ease`; return heart; } // Get the container element where the hearts will be added const container = document.querySelector('.bg_heart'); // Define a function that removes hearts that have gone off screen function removeHearts() { const hearts = container.querySelectorAll('.heart'); hearts.forEach((heart) => { const top = parseFloat(getComputedStyle(heart).getPropertyValue('top')); const width = parseFloat(getComputedStyle(heart).getPropertyValue('width')); if (top <= -100 || width >= 150) { heart.remove(); } }); } // Define a function that repeatedly adds hearts to the container function addHeart() { const heart1 = createHeart(); const heart2 = createHeart(); container.appendChild(heart1); container.appendChild(heart2); setTimeout(removeHearts, 1000); } // Start the animation loop const love = setInterval(addHeart, 500);
Пояснение:
- Функция
createHeart()
создает элемент сердца, используяdocument.createElement()
. Он устанавливает свойстваwidth
,height
,left
,background
иanimation
элемента, используя случайные значения. - Переменная
container
получает элемент DOM, в который будут добавлены сердца, используяdocument.querySelector()
. - Функция
removeHearts()
выбирает все элементы.heart
внутри контейнера и удаляет все, что исчезло с экрана. - Функция
addHeart()
создает два элемента сердца с помощьюcreateHeart()
, добавляет их в контейнер с помощьюappendChild()
и устанавливает тайм-аут для вызоваremoveHearts()
через одну секунду. - Интервал
love
повторно вызываетaddHeart()
каждые 500 миллисекунд.
Не стесняйтесь подписываться на меня в Twitter, GitHub и YouTube.🙂