css实现心形，及点赞特效

在线小白www

已于 2022-02-16 10:59:50 修改

阅读量1.1k

点赞数 1

分类专栏： CSS JavaScript 文章标签： css css3 html

于 2022-02-16 10:58:24 首次发布

原文链接：https://juejin.cn/post/7022770137589612551

版权

JavaScript 同时被 2 个专栏收录

128 篇文章 7 订阅

订阅专栏

CSS

97 篇文章 1 订阅

订阅专栏

转载：点赞按钮居然还能这么玩❤️？ - 掘金

心形：是通过一个旋转的正方形和两个圆形构成的。

<!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">
  <title>Document</title>
  <style>
    .likeBtn {
      position: relative;
      width: 25px;
      height: 21px;
    }

    /* 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;
    }

    /* 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);
      }
    }

    /* 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);
      }
    }
  </style>
</head>

<body>
  <!-- fullLove.html -->
  <div class="likeBtn" id="likeBtn">
    <span class="heart" id="heart"></span>
  </div>
  <script>
    // 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')
    })
    likeBtn.addEventListener("click", function () {
      addHearts(likeBtn)
    })
    // love.js
    function addHearts(content) {
      for (let i = 0; i < 5; 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)
      }
    }

  </script>
</body>

</html>

在线小白www

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css实现心形，及点赞特效

转载：点赞按钮居然还能这么玩❤️？ - 掘金<!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">.
复制链接

扫一扫