红心点赞效果的实现
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点赞特效插件
Hexo NexT主题/cnblog等博客增加点击出现红心的特效