红心点赞效果的实现

不念不忘少年蓝@ 2023-10-06 22:21 12阅读 0赞

![在这里插入图片描述][24426bf3fda04d44b14e90dd0e43b88f.gif_pic_center]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <style>
        span{
          color:#999;}
        p{
          color:#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>

[24426bf3fda04d44b14e90dd0e43b88f.gif_pic_center]: https://img-blog.csdnimg.cn/24426bf3fda04d44b14e90dd0e43b88f.gif#pic_center