首页 文章详情

点赞按钮居然还能这么玩?

IQ前端 | 74 2022-01-21 10:03 0 0 0
UniSMS (合一短信)

☀️ 前言

  • 前段时间在看一档说唱节目,被里面的一个说唱歌手JBcob爱之满满这句词给洗脑了。
  • 感谢大家对上一篇文章请务必收下这10+个加载特效,保证让你的项目大放异彩⭐的喜爱,于是我就想着怎么让大家点赞感受到爱之满满的感觉呢?
  • 于是这次给大家带来一个爱之满满的点赞按钮,让大家在点赞的同时还能感受到被爱包裹的感觉。

🦸‍♂️ ToDoList

  • [ ] 爱心按钮
  • [ ] 引导点赞
  • [ ] 爱之满满

⚔️ Just Do It

❤️ 爱心按钮

  • 制作一个爱心的方式有很多,可以用图标库的爱心,可以写一个svg,可以用图片,我这里就用「伪元素」的方式做一个爱心。
<!-- fullLove.html -->
<div class="likeBtn" id="likeBtn">
    <span class="heart" id="heart"></span>
</div>
/* fullLove.css */
.heart{
    background-color#8a93a0;
    height13px;
    width13px;
    transformrotate(-45degscale(1);
    display: inline-block;
}
.heart::before {
    content'';
    position: absolute;
    top: -50%;
    left0;
    background-color: inherit;
    border-radius50%;
    height13px;
    width13px;
}
.heart::after {
    content'';
    position: absolute;
    top0;
    right: -50%;
    background-color: inherit;
    border-radius50%;
    height13px;
    width13px;
}
  • 再给外层加一些阴影就可以出来「拟态化效果」

💓 引导点赞

  • 我们需要让按钮做出一些视觉效果来引导观众姥爷们点赞,那「持续震动」无疑是一种好的选择。
// 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% {
            transformrotate(-45degscale(1);
    }
    10% {
            transformrotate(-45degscale(1.1);
    }
    20% {
            transformrotate(-45degscale(0.9);
    }
    30% {
            transformrotate(-45degscale(1.2);
    }
    40% {
            transformrotate(-45degscale(0.9);
    }
    50% {
            transformrotate(-45degscale(1.1);
    }
    60% {
            transformrotate(-45degscale(0.9);
    }
    70% {
            transformrotate(-45degscale(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 = '<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-size15px;
    top50%;
    left50%;
    transformtranslate(-50%, -50%);
    animation: fly 3s linear forwards;
}
@keyframes fly {
    to {
        transformtranslate(-50%, -50pxscale(0);
    }
}
  • 我们来看看最终的效果吧~在线演示地址

结语

「关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」



good-icon 0
favorite-icon 0
收藏
回复数量: 0
    暂无评论~~
    Ctrl+Enter