Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.