CSS+JS怎么实现爱心点赞按钮

本文主要讲解“CSS JS如何实现爱情赞按钮”。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“CSS JS如何实现爱赞按钮”！

00-1010爱情按钮

引导表扬

充满爱

00-101010

ToDoList

做爱的方式有很多种。你可以用爱的图标库，你可以写一个svg，你可以用图片，我会用伪元素.的方式在这里做爱(学习视频分享：css视频教程)

！fullLove.html

divclass='likeBtn'id='likeBtn '

span class=' heart ' id=' heart '/span

/div/*fullLove.css*/。心脏

背景-color : # 8 a93a 0；

height:13px

宽度：13 px；

transform : rotate(-45度)刻度(1)；

display : inline-block；

}

在……之前，心脏。46860 . 66666666661

content :“”；

位置：绝对；

top :-50%；

left:0

背景-color : inherit；

边界半径：50%；

height:13px

宽度：13 px；

}

在……之后。56860 . 68686886861

content :“”；

位置：绝对；

top:0

右：-50%；

背景-color : inherit；

边界半径：50%；

height:13px

宽度：13 px；

}在外层添加一些阴影，你就可以走出拟态化效果.了

pg" alt="CSS+JS怎么实现爱心点赞按钮">

引导点赞

• 我们需要让按钮做出一些视觉效果来引导观众姥爷们点赞，那持续震动无疑是一种好的选择。

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

爱之满满

• 接下来就是最主要的爱之满满了，怎么样才能达到这种效果呢，那必然是越多的爱越好啊。

• 那我们想办法让爱心漂浮在按钮周围，在规定时间内爱心进行位移并消失即可。

• 创建一个元素可以使用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);
    }
}

到此，相信大家对“CSS+JS怎么实现爱心点赞按钮”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！