㈠使用HTML +CSS先设计一个心形，背景为灰色，接着使用原生JS的DOM操作修改一下背景属性，该语句放到DOM二级事件addEventListener的句柄。
代码示例如下图所示：
<!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%; } </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"; }); var styleSheet = document.styleSheets[0]; heart.addEventListener("click",function(){ //插入一个动画规则 styleSheet.insertRule("@keyframes test{0%{transform: scale(1);}50%{transform: scale(1.2);opacity: 0.5;}100%{transform: scale(1);}}",1);}) </script> </body> </html>
㈡使用字符集制作点赞效果
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字符集红心点赞</title> </head> <style> span{color:#999;} p{color:#D00;} div{ position: relative; width: 500px; height: 500px; } .heart{ animation: test 1s linear 1; filter:drop-shadow(0px 0px 4px rgb(192,192,192)); width: 500px; height: 500px; font-size: 200px; color:#999; position: absolute; left: 30px; top: 30px; cursor: pointer; } .heart1{ animation: test 1s linear 1; filter:drop-shadow(0px 0px 4px rgb(255,20,20)); width: 500px; height: 500px; font-size: 200px; color:#D00; position: absolute; left: 30px; top: 30px; display: none; cursor: pointer; } @keyframes test{ 0%{ transform: scale(0.8,0.8); opacity: 0.8; } 100%{ transform: scale(1,1); opacity: 1.0; } } </style> <body> <div> <div id="heart" class="heart"> ♥ </div> <div id="heart1" class="heart1"> ♥ </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>