红心点赞效果的实现

Posted 知其黑、受其白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了红心点赞效果的实现相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    spancolor:#999;
    pcolor:#D00;
    .heart
        animation: test 1s linear 1;
        filter:drop-shadow(0px 0px 4px rgb(192,192,192));
    
    .heart1
        animation: test 1s linear 1;
        filter:drop-shadow(0px 0px 4px rgb(255,20,20));
    
    @keyframes test
        0%
            transform: scale(0.8,0.8);
            opacity: 0.8;
        
        100%
            transform: scale(1,1);
            opacity: 1.0;
        
    
</style>
<body>
    <span>
        ♥♥
    </span>
    <p>
        ♥♥
    </p>

    <div style="position: relative;width: 500px;height: 500px;">
        <div id="heart" class="heart" style="width: 500px;height: 500px;font-size: 200px;line-height:200px;color:#999;position: absolute;left: 30px;top: 30px;cursor: pointer;"></div>
        <div id="heart1" class="heart1" style="width: 500px;height: 500px;font-size: 200px;line-height:200px;color:#D00;position: absolute;left: 30px;top: 30px;display: none;cursor: pointer;"></div>
    </div>

    <script>
        document.getElementById("heart").addEventListener("click", function()
        
            document.getElementById("heart1").style.display = "block";
            this.style.display = "none";
        );
        document.getElementById("heart1").addEventListener("click", function()
        
            document.getElementById("heart").style.display = "block";
            this.style.display = "none";
        );
    </script>


</body>
</html>

以上是关于红心点赞效果的实现的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET MVC+Bootstrap个人博客之praise.js点赞特效插件

Unity用Shader编程实现3D红心

如何在 Swift 中实现收藏夹或点赞按钮

Hexo NexT主题/cnblog等博客增加点击出现红心的特效

七夕专属博文-使用QGraphics画“红心“或“黑心“(含数学模型讲解)

七夕专属博文-使用QGraphics画“红心“或“黑心“(含数学模型讲解)