CSS实现直播点赞效果

前言

2022年马上过去了，迎接2023美好的一年。今天我给大家介绍一个如何用纯css先实现点赞动画效果，这个效果主要是用css的transition来实现的。 现在给大家介绍实现步骤。

我们首先要实现多个表情，一个 DOM 标签放入一个随机的表情。可以手动添加，当然也可以用css处理器sass来实现。如下：

$expression: "😀", "🤣", "❤️", "😻", "👏", "🤘", "🤡", "🤩", "👍🏼", "🐮", "🎈", "💕", "💓", "💚";
.g-wrap {
    position: relative;
    width: 50px;
    height: 50px;
}
@for $i from 1 to 51 {
    li:nth-child(#{$i}) {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;

        &::before {
            content: nth($expression, random(length($expression)));
            position: absolute;
            font-size: 50px;
        }
    }
}

如果这些表情一直都是在运动的，只不过不点击的时候，它们的透明度都为 0，我们要做的，就是当我们点击的时候，让它们从 opacity: 0 变到 opacity: 1。

要实现这一点，我们需要巧妙的用到 transition。

我们以一个表情为例子：

默认它的透明度为 opacity: 0.1

点击的时候，它的透明度瞬间变成 opacity: 1

然后，通过 transition-delay 让 opacity: 1 的状态保持一段时间后

逐渐再消失，变回 opacity: 0.1

完整css代码

html, body {
    width: 100%;
    height: 100%;
}

$expression: "😀", "🤣", "❤️", "😻", "👏", "🤘", "🤡", "🤩", "👍🏼", "🐮", "🎈", "💕", "💓", "💚";

body {
    display: flex;
    background-color: #000;
}

.g-wrap:nth-child(2) li {
    opacity: .1;
}

.g-wrap {
    position: relative;
    margin: auto;
    width: 50px;
    height: 50px;

    &::before {
        content: "👍🏼";
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        text-align: center;
        z-index: -1;
        user-select: none;
        filter: grayscale(1);
        border: 1px solid #999;
        border-radius: 50%;
        background: #999;
        transition: 0.1s;
    }
    &:active::before {
        transform: scale(1.1);
    }
}

@for $i from 1 to 51 {
    li:nth-child(#{$i}) {
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        transform: rotate(#{random() * 80 - 40}deg);
        animation: move #{random() * 2500 + 1500}ms infinite #{random() * 4000 / -1000}s cubic-bezier(.46,.53,.51,.62);
        opacity: 0;
        cursor: pointer;
        transition: 1.5s opacity .8s;
        user-select: none;

        &::before {
            content: nth($expression, random(length($expression)));
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            font-size: 50px;
        }
    }

    li:active {
        transition: .1s opacity;
        opacity: 1!important;
    }
}

@keyframes move {
    100% {
        transform: rotate(0) translate(0, -250px);
    }
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 140px), calc(-50% + 50px));
    color: #fff;
    font-size: 36px;
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% - 100px), calc(-50% + 50px));
    color: 40px;
    user-select: none;
}

完整div 代码

<ul class="g-wrap">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul class="g-wrap">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

小结

大家copy出来，可以看到效果了，今天是2022年最后一天，祝大家新年快了！