js實現使用者點贊效果
阿新 • • 發佈：2021-08-14
<!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>