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

本篇内容主要讲解“CSS+JS怎么实现爱心点赞按钮”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS+JS怎么实现爱心点赞按钮”吧!

创新互联主营兴宾网站建设的网络公司,主营网站建设方案,app软件定制开发,兴宾h5小程序设计搭建,兴宾网站营销推广欢迎兴宾等地区企业咨询

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

ToDoList

  • 爱心按钮

  • 引导点赞

  • 爱之满满

Just Do It

❤️ 爱心按钮

  • 制作一个爱心的方式有很多,可以用图标库的爱心,可以写一个svg,可以用图片,我这里就用伪元素的方式做一个爱心。(学习视频分享:css视频教程)



    
/* 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;
}
  • 再给外层加一些阴影就可以出来拟态化效果

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,移除元素可以使用DOMremove()

  • 剩下的就简单了,只需要在这个过程中不同的爱心设置不同的大小和位移即可。

  • 核心代码(完整代码请看文末):

// love.js
function addHearts(content) {
  for(let i=0; i<10; i++) {
    setTimeout(() => {
      const fullHeart = document.createElement('div');
      fullHeart.classList.add('hearts');
      fullHeart.innerHTML = '';
      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怎么实现爱心点赞按钮”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前标题:CSS+JS怎么实现爱心点赞按钮
网页地址:http://scyanting.com/article/iiheoh.html

其他资讯