纯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中找