CSS+JS는 사랑 같은 버튼을 구현합니다(코드 예)

이 기사에서는 CSS+JS를 사용하여 "사랑이 가득한" 버튼을 구현하는 방법을 소개하겠습니다.

얼마 전 랩쇼를 보다가 래퍼 JBcob의 full of love라는 문구에 세뇌당했습니다. JBcob的爱之满满这句词给洗脑了。

于是这次给大家带来一个爱之满满的点赞按钮，让大家在点赞的同时还能感受到被爱包裹的感觉。

ToDoList

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

Just Do It

❤️ 爱心按钮

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

<!-- fullLove.html -->
<div class="likeBtn" id="likeBtn">
    <span class="heart" id="heart"></span>
</div>

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

• 再给外层加一些阴影就可以出来拟态化效果

引导点赞

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

// 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(&#39;div&#39;);
      fullHeart.classList.add(&#39;hearts&#39;);
      fullHeart.innerHTML = &#39;<span class="heart"></span>&#39;;
      fullHeart.style.left = Math.random() * 100 + &#39;%&#39;;
      fullHeart.style.top = Math.random() * 100 + &#39;%&#39;;
      fullHeart.style.transform = `translate(-50%, -50%) scale(${Math.random()+0.3}) `
      fullHeart.style.animationDuration = Math.random() * 2 + 3 + &#39;s&#39;;
      fullHeart.firstChild.style.backgroundColor=&#39;#ed3056&#39;
      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);
    }
}

• 我们来看看最终的效果吧~在线演示地址

写在最后

• 首先感谢大家看到这里，这次分享的是爱之满满
그래서 이번에는 모두가 좋아하면서 사랑에 휩싸인 기분을 느낄 수 있도록 사랑이 가득 좋아요 버튼을 가져왔습니다.

ToDoList

• 사랑 버튼

좋아요 가이드

사랑이 가득🎜🎜

그냥 하세요

❤️ 하트 버튼

• 하트를 만드는 방법은 다양합니다. 아이콘 라이브러리에 있는 하트를 사용하거나 svg, 사진을 사용할 수 있습니다. 여기서는 의사 요소를 사용하여 하트를 만듭니다. (학습 영상 공유: css 영상 튜토리얼🎜)🎜🎜rrreeerrreee
  • 내놔 more 외부 레이어에 그림자를 추가하여 모방 효과🎜🎜🎜🎜

    가이드 좋아요

    • 우리 버튼에 청중이 좋아하도록 유도하기 위한 시각적 효과가 필요한 경우 지속적인 진동은 의심의 여지 없이 좋은 선택입니다. 🎜🎜rrreeerrreee🎜🎜

      사랑 가득

      • 다음 단계는 가장 중요한 사랑 가득입니다. , 어떻게 이 효과를 얻을 수 있습니까? 사랑이 많을수록 좋습니다. 🎜
      • 그럼 버튼 주위에 사랑이 떠다니고 지정된 시간 내에 옮겨 사라지게되는 방법을 찾아보겠습니다. 🎜
      • 요소를 생성하려면 document.createElement를 사용할 수 있고, 요소를 제거하려면 DOM의 remove()🎜를 사용할 수 있습니다.
      • 나머지는 쉽습니다. 프로세스에서 다른 하트에 대해 서로 다른 크기와 변위를 설정하기만 하면 됩니다. 🎜
      • 핵심 코드(전체 코드는 기사 끝 부분을 참조하세요): 🎜🎜rrreeerrreee
        • 최종 효과를 살펴보겠습니다~온라인 데모 주소 🎜🎜🎜🎜🎜

          마지막에 적어주세요

          • 우선 이걸 봐주신 모든 분들께 감사드립니다. 이번에는 사랑 가득 좋아요 효과를 공유합니다. 도움이 필요한 학생들에게 도움이 되기를 바랍니다. 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 배우기🎜를 방문하세요! !🎜

위 내용은 CSS+JS는 사랑 같은 버튼을 구현합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!