찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS+JS는 사랑 같은 버튼을 구현합니다(코드 예)

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

青灯夜游
青灯夜游앞으로
2021-10-26 11:05:444511검색

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

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

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

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

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

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: &#39;&#39;;
    position: absolute;
    top: -50%;
    left: 0;
    background-color: inherit;
    border-radius: 50%;
    height: 13px;
    width: 13px;
}
.heart::after {
    content: &#39;&#39;;
    position: absolute;
    top: 0;
    right: -50%;
    background-color: inherit;
    border-radius: 50%;
    height: 13px;
    width: 13px;
}
  • 再给外层加一些阴影就可以出来拟态化效果

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

引导点赞

  • 我们需要让按钮做出一些视觉效果来引导观众姥爷们点赞，那持续震动无疑是一种好的选择。
// love.js
const likeBtn = document.getElementById(&#39;likeBtn&#39;);
const heart=document.getElementById(&#39;heart&#39;)
likeBtn.addEventListener(&#39;mousemove&#39;,() => {
  heart.classList.add(&#39;heratPop&#39;)
})
likeBtn.addEventListener(&#39;mouseout&#39;,() => {
  heart.classList.remove(&#39;heratPop&#39;)
})
/* 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);
    }
}

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

爱之满满

  • 接下来就是最主要的爱之满满了，怎么样才能达到这种效果呢，那必然是越多的爱越好啊。
  • 那我们想办法让爱心漂浮在按钮周围，在规定时间内爱心进行位移并消失即可。
  • 创建一个元素可以使用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);
    }
}

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

写在最后

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

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

ToDoList

  • 사랑 버튼

  • 좋아요 가이드
  • 사랑이 가득🎜🎜

    그냥 하세요

    ❤️ 하트 버튼

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

    성명：
    이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
    이전 기사：CSS를 모듈화해야 하는 이유에 대해 이야기해 볼까요? 모듈화를 구현하는 방법은 무엇입니까?다음 기사：CSS를 모듈화해야 하는 이유에 대해 이야기해 볼까요? 모듈화를 구현하는 방법은 무엇입니까?

    관련 기사

    더보기