红心点赞效果的实现

DOCTYPE html>


    
    Document


    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;
        }
    }


    
        ♥♥
    
    
        ♥♥
    

    
        
            ♥
        
        
            ♥
        
    

    
        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";
        });