vue实现纯css直播点赞图标的动画效果组件

禾小毅

已于 2023-02-23 17:38:00 修改

阅读量1.7k

点赞数 2

分类专栏： VUE+ElmentUI 文章标签： css css3 html

于 2023-02-23 17:33:17 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50450473/article/details/129185936

版权

VUE+ElmentUI 专栏收录该内容

37 篇文章

订阅专栏

这篇文章提供了一个用于创建直播点赞动画的Vue.js组件代码，包括HTML模板和CSS样式。动画利用了绝对定位、旋转和透明度变化，以及CSS关键帧动画来模拟点赞飘动效果。图片资源路径和表情符号被用作点赞图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果图

直播点赞动画

二、完整代码如下

<!-- 直播点赞动画 -->
<template>
<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>
</ul>
</template>
<style lang="scss" scoped>
$expression:url('../../../../assets/img/newVer/1.png'),
url('../../../../assets/img/newVer/2.png'),
url('../../../../assets/img/newVer/3.png'),
url('../../../../assets/img/newVer/4.png'),
url('../../../../assets/img/newVer/5.png'),
url('../../../../assets/img/newVer/6.png'),
url('../../../../assets/img/newVer/7.png'),
url('../../../../assets/img/newVer/8.png');

// $expression: "😀", "🤣", "❤️", "😻", "👏", "🤘", "🤡", "🤩", "👍🏼", "🐮", "🎈", "💕", "💓", "💚";
.g-wrap {
    position: relative;
    margin-left: 35px;
    width: 25px;
    height: 25px;
    background: url('../../../../assets/img/newVer/love_icon.png') no-repeat;
    background-size: 100% 100%;
    &::before {
        content: "👍🏼";
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 30px;
        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);
    }
}

@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: 30px;
            height: 30px;
            background-size: 100% 100%;
            font-size: 30px;
        }
    }

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

@keyframes move {
    100% {
        transform: rotate(0) translate(-50px, -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;
}
</style>

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~