<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>微信点赞</title>
<style>
*{
padding: 0;
margin: 0;
}
.heart{
position:absolute;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -135px;
width: 300px;
height:270px;
background: transparent;
animation: test 1s linear 1;
filter:drop-shadow(0px 0px 4px rgb(192,192,192));
}
.heart1{
position:absolute;
left: 50%;
top:50%;
margin-left: -150px;
margin-top: -135px;
width: 300px;
height:270px;
background: transparent;
animation: test 1s linear 1;
filter:drop-shadow(0px 0px 4px rgb(255,20,20));
}
.heart:before,
.heart:after{
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 240px;
background: rgb(192,192,192);
border-radius: 150px 150px 0 0;
transform:rotate(-45deg);
transform-origin: 0 100%;
}
.heart1:before,.heart1:after{
content: "";
position: absolute;
left: 150px;
width: 150px;
height: 240px;
background: rgb(255,0,0);
border-radius: 150px 150px 0 0;
transform:rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after,.heart1:after{
left: 0;
transform:rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes test{
0%{
transform: scale(0.8,0.8);
opacity: 1;
}
25%{
transform: scale(1,1);
opacity: 0.8;
}
100%{
transform: scale(0.8,0.8);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="heart" class="heart" >
</div>
<div id="heart1" class="heart1" style="display: none;">
</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>
