点赞+1效果

最新推荐文章于 2024-05-16 10:02:43 发布

暖夏随园

最新推荐文章于 2024-05-16 10:02:43 发布

阅读量2k

点赞数 2

分类专栏： css javascript/jquery 文章标签： css

本文链接：https://blog.csdn.net/nuanxiasuiyuan/article/details/78105155

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

javascript/jquery

7 篇文章 0 订阅

订阅专栏

html代码：

<body>
    <h1>❤<span>+1</span></h1>
</body>

css代码：

    h1{
            font-size: 50px;
            color: pink;
            text-align: center;
            position: relative;
        }
        span{
            font-size: 25px;
            font-weight: normal;
            color: #333;
            position: absolute;
            top: 0;
            left: 50%;
            opacity: 0;
        }
        .active span{
            -webkit-animation:flutter 1.2s ease-in-out;
            animation:flutter 1.2s 1 ease-in-out;
        }
        @keyframes flutter{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
                top: -10px;
                left: 53%;
            }
        }

js代码：

$("h1").on("click",function(){
        if(!$(this).is(".active")){
            $(this).addClass("active");    
        }

    })

点击过后效果图如下：

这里写图片描述

暖夏随园

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点赞+1效果

html代码：<body> <h1>❤<span>+1</span></h1></body>css代码： h1{ font-size: 50px; color: pink; text-align: center; position: relative; }
复制链接

扫一扫