-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg-like.html
147 lines (142 loc) · 4.67 KB
/
svg-like.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>纯CSS实现点赞的动画效果</title>
<link rel="stylesheet" href="../css/65.css">
<style>
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
}
.container{
/* 鼠标移入,光标变小手 */
cursor: pointer;
/* 自定义属性,可通过var函数对其调用 */
--c: #ff6b81;
}
svg{
width: 200px;
/* 溢出可见 */
overflow: visible;
/* 相对定位 */
position: relative;
z-index: 10;
}
#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 ~ span{
/* 执行动画：动画名 时长 加速后减速 停留在最后一帧 */
animation: blink 0.5s ease-in-out forwards;
/* 动画延迟时间 */
animation-delay: 0.85s;
}
#checkbox:checked + svg{
/* 执行动画：动画名 时长 线性的 停留在最后一帧 */
animation: beat 1s linear forwards;
}
/* 定义动画 */
/* 画心的动画 */
@keyframes drawHeart {
0%{
stroke: var(--c);
stroke-dashoffset: 2600;
}
80%{
stroke: var(--c);
stroke-dashoffset: 0;
fill: #eee;
}
100%{
stroke: var(--c);
stroke-dashoffset: 0;
fill: var(--c);
}
}
/* 小圆点闪出的动画 */
@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);
}
}
</style>
</head>
<body>
<label class="container" for="checkbox">
<input type="checkbox" id="checkbox" hidden>
<svg t="1639040689615" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2330"><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="2331" id="heart"></path></svg>
<span></span>
</lab>
</body>
</html>