Кнопка "палец вверх" смогла так сыграть ❤️?

внешний интерфейс CSS
Кнопка "палец вверх" смогла так сыграть ❤️?

Эта статья участвовала в "Проект «Звезда раскопок»”, чтобы выиграть творческий подарочный пакет и бросить вызов творческим поощрительным деньгам.

☀️ Предисловие

image.png

🦸‍♂️ Список дел

  • кнопка любви
  • Руководство нравится
  • полный любви

⚔️ Просто сделай это

❤️ сердечко

  • Есть много способов сделать сердце, вы можете использовать сердце из библиотеки иконок, вы можете написать сердцеsvg, Вы можете использовать фотографии, я буду использовать его здесь.Псевдоэлементспособ быть любящим сердцем.
<!-- fullLove.html -->
<div class="likeBtn" id="likeBtn">
    <span class="heart" id="heart"></span>
</div>

/* fullLove.css */
.heart{
    background-color: #8a93a0;
    height: 13px;
    width: 13px;
    transform: rotate(-45deg) scale(1);
    display: inline-block;
}
.heart::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    background-color: inherit;
    border-radius: 50%;
    height: 13px;
    width: 13px;
}
.heart::after {
    content: '';
    position: absolute;
    top: 0;
    right: -50%;
    background-color: inherit;
    border-radius: 50%;
    height: 13px;
    width: 13px;
}
  • Добавьте немного теней к внешнему слою, и вы сможете выйти.Мимический эффект

image.png

💓 Руководство по лайкам

  • Нам нужно сделать кнопку, чтобы сделать некоторые визуальные эффекты, чтобы направлять дедушку аудитории.Непрерывная вибрацияНесомненно хороший выбор.
// love.js
const likeBtn = document.getElementById('likeBtn');
const heart=document.getElementById('heart')
likeBtn.addEventListener('mousemove',() => {
  heart.classList.add('heratPop')
})
likeBtn.addEventListener('mouseout',() => {
  heart.classList.remove('heratPop')
})

/* fullLove.css */
.heratPop{
    animation: pulse 1s linear infinite;
}
@keyframes pulse {
    0% {
            transform: rotate(-45deg) scale(1);
    }
    10% {
            transform: rotate(-45deg) scale(1.1);
    }
    20% {
            transform: rotate(-45deg) scale(0.9);
    }
    30% {
            transform: rotate(-45deg) scale(1.2);
    }
    40% {
            transform: rotate(-45deg) scale(0.9);
    }
    50% {
            transform: rotate(-45deg) scale(1.1);
    }
    60% {
            transform: rotate(-45deg) scale(0.9);
    }
    70% {
            transform: rotate(-45deg) scale(1);
    }
}

fullLove1.gif

💕 полный любви

  • Далее самое главноеполный любвиТеперь, как добиться этого эффекта, должно быть, чем больше любви, тем лучше.
  • Затем мы пытаемся сделатьлюблю плаватьвокруг кнопки за указанное времяЛюбовь движется и исчезаетВот и все.
  • Чтобы создать элемент, вы можете использоватьdocument.createElement, чтобы удалить элементы, вы можете использоватьDOMизremove()
  • Остальное просто, нужно тольково время этого процессаДатьразная любовьВы можете установить различные размеры и смещения.
  • основной код (Полный код смотрите в конце статьи.):
// love.js
function addHearts(content) {
  for(let i=0; i<10; i++) {
    setTimeout(() => {
      const fullHeart = document.createElement('div');
      fullHeart.classList.add('hearts');
      fullHeart.innerHTML = '<span class="heart"></span>';
      fullHeart.style.left = Math.random() * 100 + '%';
      fullHeart.style.top = Math.random() * 100 + '%';
      fullHeart.style.transform = `translate(-50%, -50%) scale(${Math.random()+0.3}) `
      fullHeart.style.animationDuration = Math.random() * 2 + 3 + 's';
      fullHeart.firstChild.style.backgroundColor='#ed3056'
      content.appendChild(fullHeart);
      setTimeout(() => {
        fullHeart.remove();
      }, 3000);
    }, i * 100)
  }
}

/* fullLove.css */
.hearts {
    position: absolute;
    color: #E7273F;
    font-size: 15px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fly 3s linear forwards;
}
@keyframes fly {
    to {
        transform: translate(-50%, -50px) scale(0);
    }
}

fullLove3.gif

👋 Напишите в конце

  • Прежде всего, спасибо, что заглянули сюда, на этот раз обмен爱之满满Как эффект, я надеюсь, что это может помочь нуждающимся студентам.
  • Если вы считаете эту статью полезной, пожалуйста,🍉 Подписаться + Нравится + Избранное + Комментарий + Ретвитнуть 🍉Поддержите~~😛Ваша поддержка - самая большая мотивация для моего обновления.
  • Если вы хотите обсудить и узнать больше о интерфейсе со мной, вы можете присоединиться ко мне.Учебная группа по внешнему обмену, давай поговорим о мире вместе~~~

🌅 Прекрасное прошлое

Обязательно ознакомьтесь с этими более чем 10 эффектами загрузки, которые сделают ваш проект блестящим ⭐

Время для чашки чая🍵, чтобы вы полностью научились писать от руки, предотвращая дрожание.

Загрузка «Меча Ци» 🌪️

Менеджер по продукту: Можете ли вы заставить облако слов двигаться?

Категории