抖音雙擊點贊動效｜8月更文挑戰

這是我參與8月更文挑戰的第7天，活動詳情查看：8月更文挑戰css

做者：battleKing
倉庫：Github、CodePen
博客：CSDN、掘金
反饋郵箱：myh19970701@foxmail.com
特別聲明：原創不易，未經受權不得轉載或抄襲，如需轉載可聯繫筆者受權html

背景

雙擊點贊動畫：是指用手指點擊兩下特定的區域，就會自動完成點贊操做，這種動畫在 桌面端 並不常見，由於在桌面端咱們能夠用 鼠標精準的點擊到點贊按鈕，只要 一次點擊 就能夠完成點贊操做，雙擊點贊 顯得雞肋，可是自從 4G 時代到來後，移動端 的設備大幅增長，但移動端之前都是 小屏時代，點贊按鈕 太大容易 遮擋視線，過小又不容易 精準點擊 ，因此不少企業就採用雙擊點讚的方式來達到更好的 交互體驗，其中 字節跳動 公司旗下的 抖音 應該是把雙擊點贊運用的最成熟軟件之一。因此咱們今天就一塊兒來學習一下它是如何使用代碼實現的。git

最終效果

1、導入 Font Awesome 圖標庫

<script src="https://use.fontawesome.com/ab349f0a54.js" ></script>
複製代碼

2、添加 HTML 文件

<h3>Double click on the image to <i class="fa fa-heart"></i> it</h3>
<small>You liked it <span id="times">0</span> times</small>   
<div class="loveMe"></div>
複製代碼

3、添加 CSS 文件

先初始化頁面github

設置 * 爲 box-sizing: border-box
設置 body 來使整個項目居中

* {
  box-sizing: border-box;
}
body {
    text-align: center;
    overflow: hidden;
    margin: 0;
}
複製代碼

主要的 CSS 代碼markdown

h3 {
    margin-bottom: 0;
    text-align: center;
}

small {
    display: block;
    margin-bottom: 20px;
    text-align: center;
}

.fa-heart {
    color: red;
}

.loveMe {
    height: 440px;
    width: 300px;
    background: url('https://images.hdqwalls.com/download/lisa-blackpink-4k-mg-1920x1080.jpg') no-repeat center center/cover;
    margin: auto;
    cursor: pointer;
    max-width: 100%;
    position: relative;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.loveMe .fa-heart {
    position: absolute;
    animation: grow 0.6s linear;
    transform: translate(-50%, -50%) scale(0);
}

@keyframes grow {
    to {
        transform: translate(-50%, -50%) scale(10);
        opacity: 0;
    }
}
複製代碼

4、添加 JS 文件

主要邏輯app

const loveMe = document.querySelector('.loveMe')
const times = document.querySelector('#times')

let clickTime = 0
let timesClicked = 0

loveMe.addEventListener('click', (e) => {
    if (clickTime === 0) {
        clickTime = new Date().getTime()
    } else {
        if ((new Date().getTime() - clickTime) < 800) {
            createHeart(e)
            clickTime = 0
        } else {
            clickTime = new Date().getTime()
        }
    }
})

const createHeart = (e) => {
    const heart = document.createElement('i')
    heart.classList.add('fa')
    heart.classList.add('fa-heart')

    const x = e.clientX
    const y = e.clientY

    const leftOffset = e.target.offsetLeft
    const topOffset = e.target.offsetTop

    const xInside = x - leftOffset
    const yInside = y - topOffset

    heart.style.top = `${yInside}px`
    heart.style.left = `${xInside}px`

    loveMe.appendChild(heart)

    times.innerHTML = ++timesClicked

    setTimeout(() => heart.remove(), 1000)
}
複製代碼

❤️ 感謝你們

若是本文對你有幫助，就點個贊支持下吧，你的「贊」是我創做的動力。ide

若是你喜歡這篇文章的話，能夠「點贊」 + 「收藏」 + 「轉發」給更多朋友。oop