使用HTML和CSS绘制动态爱心效果：完整代码示例 | 南锋

南锋

南奔万里空，脱死锋镝余

使用HTML和CSS绘制动态爱心效果：完整代码示例

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 6.7k 阅读时长 ≈ 6 分钟
通过 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!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">
    <title>love</title>
    <style>
        body {
            height: 100vh;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .loveMargin {
            width: 300px;
            height: 300px;
            background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            position: relative;
            animation: scaleDraw 3s infinite;
            -webkit-animation: scaleDraw 3s infinite;
        }
 
        .loveMargin::after {
            content: '';
            position: absolute;
            left: 0px;
            top: -142px;
            width: 300px;
            height: 300px;
            background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        .loveMargin::before {
            content: '';
            position: absolute;
            left: -137px;
            width: 300px;
            height: 300px;
            background: linear-gradient(148deg, #f00, transparent 2px), linear-gradient(45deg, pink 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        .a1 {
            transform: scale(1.2);
        }
 
        .a2 {
            transform: scale(0.9);
            position: absolute;
            top: 4px;
        }
 
        .a2 {
            transform: scale(0.9);
            position: absolute;
            top: -6px;
            left: -6px;
        }
 
        .a4 {
            transform: scale(0.5);
            position: absolute;
            top: -10px;
            left: -10px;
        }
 
        .a5 {
            transform: scale(0.9);
            position: absolute;
            top: 10px;
            left: -10px;
        }
 
        .a6 {
            transform: scale(0.9);
            position: absolute;
            top: 6px;
            left: -10px;
        }
 
        .loveContent {
            background: linear-gradient(148deg, #fff, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            width: 250px;
            height: 250px;
            background-size: 10px 10px;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 200;
            /* animation: scaleDraw 2s infinite;
            -webkit-animation: scaleDraw 2s infinite; */
        }
 
        .loveContent::after {
            content: '';
            position: absolute;
            left: 0px;
            top: -142px;
            width: 250px;
            height: 250px;
            background: linear-gradient(148deg, #fff, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
            z-index: 200;
        }
 
        .loveContent::before {
            content: '';
            position: absolute;
            left: -137px;
            width: 250px;
            height: 250px;
            background: linear-gradient(148deg, #fff, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
            z-index: 200;
        }
 
        .c1 {
            z-index: 200;
            top: 22px;
            left: 22px;
        }
 
        .c2 {
            z-index: 210;
            top: 23px;
            left: 23px;
        }
 
        .c3 {
            z-index: 205;
            top: 25px;
            left: 25px;
        }
 
        .c4 {
            z-index: 280;
            top: 21px;
            left: 20px;
        }
 
        .c5 {
            z-index: 206;
            top: 20px;
            left: 18px;
        }
 
        .c6 {
            z-index: 220;
            top: 18px;
            left: 20px;
        }
 
        .c7 {
            z-index: 211;
            top: 19px;
            left: 19px;
        }
 
        .c8 {
            z-index: 221;
            top: 23px;
            left: 20px;
        }
 
        .loveItem {
            width: 200px;
            height: 200px;
            background: linear-gradient(148deg, #000, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            position: absolute;
            z-index: 300;
            top: 57px;
            left: 51px;
            /* #c55473 */
            /* background: #983647; */
            background-size: 10px 10px;
            animation: scaleDraw 2s infinite;
            -webkit-animation: scaleDraw 2s infinite;
        }
 
        .loveItem::after {
            content: '';
            position: absolute;
            z-index: 300;
            left: 0px;
            top: -142px;
            width: 200px;
            height: 200px;
            background: linear-gradient(148deg, #000, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        .loveItem::before {
            content: '';
            position: absolute;
            z-index: 300;
            left: -137px;
            width: 200px;
            height: 200px;
            background: linear-gradient(148deg, #000, transparent 2px), linear-gradient(45deg, #c55473 0px, transparent 3px);
            background-size: 10px 10px;
            /* backdrop-filter: saturate(75%) blur(0px); */
            border-radius: 50%;
        }
 
        @keyframes scaleDraw {
            /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
 
            0% {
                transform: scale(1);
                /*开始为原始大小*/
            }
 
            50% {
                transform: scale(1.1);
                /*放大1.1倍*/
            }
 
            100% {
                transform: scale(1);
                /*开始为原始大小*/
            }
        }
 
        .i1{
            top: 57px;
            left: 51px;
        }
        .i2{
            top: 51px;
            left: 57px;
        }
        .i3{
            top: 50px;
            left: 52px;
        }
        .i4{
            top: 60px;
            left: 60px;
        }
        .i5{
            top: 58px;
            left: 51px;
        }
        .i6{
            top: 58px;
            left: 52px;
        }
        .i7{
            top: 62px;
            left: 60px;
        }
        .i8{
            top: 68px;
            left: 61px;
        }
    </style>
</head>
 
<body>
    <div style="transform: rotate(45deg);">
        <div class="loveMargin a1">
            <div class="loveMargin  a2"></div>
            <div class="loveMargin  a3"></div>
            <div class="loveMargin  a4"></div>
            <div class="loveMargin  a5"></div>
            <div class="loveMargin  a6"></div>
            <div class="loveContent c1"></div>
            <div class="loveContent c2"></div>
            <div class="loveContent c3"></div>
            <div class="loveContent c4"></div>
            <div class="loveContent c5"></div>
            <div class="loveContent c6"></div>
            <div class="loveContent c7"></div>
            <div class="loveContent c8"></div>
            <div class="loveContent c9"></div>
            <div class="loveItem i1"></div>
            <div class="loveItem i2"></div>
            <div class="loveItem i3"></div>
            <div class="loveItem i4"></div>
            <div class="loveItem i5"></div>
            <div class="loveItem i6"></div>
            <div class="loveItem i7"></div>
            <div class="loveItem i8"></div>
        </div>
    </div>
 
</body>
 
</html>

小白使用教程

先在电脑桌面新建一个记事本,然后打开记事本，将上面代码复制粘贴记事本，修改文件后缀为.html，然后用浏览器打开该文件即可

+