爱之满满点赞按钮

最新推荐文章于 2025-03-07 14:44:04 发布

masju

最新推荐文章于 2025-03-07 14:44:04 发布

阅读量140

点赞数

文章标签： css css3 html

原文链接：https://juejin.cn/post/7022770137589612551?searchId=202312261658288BD81138A0E4885304EE

版权

<!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>心点赞</title>
</head>

<body>
    
    <div class="demo">
        <div class="likeBtn" id="likeBtn" onclick="addHearts()">
            <span class="heart" id="heart"></span>
        </div>
    </div>
</body>
<style>

.heart{
    background-color: #8a93a0;
    height: 13px;
    width: 13px;
    transform: rotate(-45deg) scale(1);
    display: inline-block;
}
.heart::before {
    content: '';
    position: absolute;
    top: -70%;
    left: 0;
    background-color: inherit;
    border-radius: 50%;
    height: 13px;
    width: 13px;
}
.heart::after {
    content: '';
    position: absolute;
    top: 0;
    right: -70%;
    background-color: inherit;
    border-radius: 50%;
    height: 13px;
    width: 13px;
}
.heratPop{
    animation: pulse 1s linear infinite;
}
.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);
    }
}
@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);
    }
}
</style>
<script>
const likeBtn = document.getElementById('likeBtn');
const heart=document.getElementById('heart')
likeBtn.addEventListener('mousemove',() => {
  heart.classList.add('heratPop')
})
likeBtn.addEventListener('mouseout',() => {
  heart.classList.remove('heratPop')
})
function addHearts () {
    const content =  document.getElementById('heart');
  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)
  }
}
</script>

</html>