How to realize the Love like Button in CSS+JS
This article mainly explains "how to realize the like button in CSS+JS". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to realize the like button for CSS+JS"!
ToDoList
Love button
Guide and like
Full of love
Just Do It ❤️ Love Button
There are many ways to make a love, you can use the love of the icon library, you can write a svg, you can use pictures, here I use pseudo-elements to do a love. (learn video sharing: css video tutorial)
/ * 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;}
Add some shadows to the outer layer and you can get a mimicry effect.
Guide and like
We need to let the button make some visual effects to guide the audience grandfather to like, that continuous vibration is undoubtedly a good choice.
/ / love.jsconst 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);}} full of love
Next is the most important love is full, how to achieve this effect, it must be the more love the better.
Then we find a way to let the love float around the button, and the love can shift and disappear within a specified period of time.
You can use document.createElement to create an element and DOM's remove () to remove the element.
The rest is simple, just set different sizes and displacements for different hearts in the process.
Core code (see the end of the article for the complete code):
/ / love.jsfunction addHearts (content) {for (let iTuno; I {const fullHeart = document.createElement ('div'); fullHeart.classList.add (' hearts'); fullHeart [XSS _ clean] =''; 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 + '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) }} at this point, I believe you have a deeper understanding of "how to realize the like button in CSS+JS". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
