纯HTML和CSS实现点赞效果，动态效果由CSS实现，主要有两个动画实现
代码下面自取🖖
🎈效果如下
HTML代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="like.css"> <title>精美点赞效果</title> </head> <body> <label for="checkbox"> <input type="checkbox" id="checkbox" hidden> <svg t="1651108144758" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3464" > <path d="M512 896a42.666667 42.666667 0 0 1-30.293333-12.373333l-331.52-331.946667a224.426667 224.426667 0 0 1 0-315.733333 223.573333 223.573333 0 0 1 315.733333 0L512 282.026667l46.08-46.08a223.573333 223.573333 0 0 1 315.733333 0 224.426667 224.426667 0 0 1 0 315.733333l-331.52 331.946667A42.666667 42.666667 0 0 1 512 896z" p-id="3465" id="heart"></path> </svg> <span class="dh"></span> </label> </body> </html>
like.css
*{ margin: 0; padding: 0; } body{ height: 100vh; display:flex; justify-content: center; align-items: center; /* 自定义属性 可通过var函数对齐调用*/ --c:red; } svg{ width: 200px; position: relative; z-index: 0; } #heart{ fill:#eee; /* stroke 属性可应用于任何种类的线条，文字和元素，就像一个 圆的轮廓 */ stroke:var(--c); /* 线条宽度 */ stroke-width: 40px; /* 设置线条为虚线，虚线的长度 */ stroke-dasharray: 2600; /* 线条的位移 */ stroke-dashoffset: 2600; /* 端点为圆头 */ stroke-linecap: round; } span{ display:block; width: 24px; height:24px; background-color:transparent; border-radius: 50%; position: absolute; top:50%; left:50%; /* 设置各个方向的阴影 */ transform: translate(-50%,-50%) scale(0); box-shadow: 0 -160px 0 var(--c), 0 160px 0 var(--c), -160px 0 0 var(--c), 160px 0 0 var(--c), -120px -120px 0 var(--c), 120px -120px 0 var(--c), 120px 120px 0 var(--c), -120px 120px 0 var(--c); } #checkbox:checked + svg #heart{ animation: drawHeart 1s linear forwards; } #checkbox:checked ~ .dh{ animation: blink 0.5 ease-in-out forwards; animation-delay: 0.85s; } label{ cursor: pointer; } #checkbox:checked + svg{ animation: beat 1s linear forwards; } @keyframes drawHeart{ 0%{ stroke-dashoffset: 2600; } 80%{ fill:#eee; stroke-dashoffset: 0; } 100%{ fill: var(--c); stroke-dashoffset: 0; } } @keyframes blink { 0%{ transform: translate(-50%,-50%) scale(0.5); opacity: 0.8; } 50%{ transform: translate(-50%,-50%) scale(1); opacity: 1; } 100%{ transform: translate(-50%,-50%) scale(1.1); opacity: 0; } } /* 心跳动画 */ @keyframes beat{ 0%{ transform: scale(1); } 70%{ transform: scale(1); } 80%{ transform: scale(1.2); } 100%{ transform: scale(1); } }
项目中的心型图案可以在 IConfont中找
