抖音双击点赞动效｜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