<!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>