用html和css 来做一个为情人节的跳动的心_跳动的心网页

作者：不正经 | 2024-03-07 07:06:21

踩

跳动的心网页

用html和css 来做一个为情人节的跳动的心

前端基础学习

首先，我们应该明白学习前端是重要的一点就是对ｈｔｍｌ网页的设计和布局，因为我们所有呈现的内容都是基于HTML网页的。但又不知是对网页布局上的一个美观体现，更重要的是去实现视觉和交互功能，让一个ｈｔｍｌ网页动起来！

一、实现效果

在这里插入图片描述

二：部分代码描述

代码很简单，这里就不细讲了！主要就是２个ｄｉｖ代码和２个特效动画，一个是跳动的心的ｄｉｖ盒子ｂｏｘ，用一左（．ｌｅｆｔ）一右（．ｒｉｇｈｔ）的叠加，给其添加border-radius圆角边框，实现爱心。周围的渲染 box-shadow的模糊半径。

  .left{
        position:absolute;
        top: 20px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(-45deg);
        background-color: red;
        box-shadow: -30px  -20px 20px  20px pink;  /*X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。*/
        
    }
    .right{
        position:absolute;
        top: 20px;
        left: 70px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(45deg);
        background-color: red;
        box-shadow: 30px -20px 20px 20px pink;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述
最后一个就是流星特效，定义一个流星ｄｉｖ标签和动画，用渐变的方式来改变他的形状（从长方体到流星图）然后就是根据子代选择器来创建多个流星，只要在子代选择器下来改变流星的初始位置即可。需要注意的是流星特效不能覆盖爱心特效，所以在流星的堆叠顺序要小于爱心（ z-index: 999;）。

.liuxin{
        position: absolute;
        width: 3px;
        height: 200px;
        background-image: -webkit-linear-gradient(rgba(0,0,0,0), #fff);   /*背景色渐变 由黑到白    注意不同浏览器有兼容问题*/
        transform: rotate(-45deg);
        animation: liu 3s linear infinite ; 
        z-index: 999;
    }
1
2
3
4
5
6
7
8
9

三：代码

```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">
    <title>Document</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: black;
        overflow:hidden;                /*超出边框隐藏*/ 
    }
    
    .liuxin{
        position: absolute;
        width: 3px;
        height: 200px;
        background-image: -webkit-linear-gradient(rgba(0,0,0,0), #fff);   /*背景色渐变 由黑到白    注意不同浏览器有兼容问题*/
        transform: rotate(-45deg);
        animation: liu 3s linear infinite ; 
        z-index: 999;
    }
    .liuxin:nth-child(1){              /*子代选择器*/
        animation-delay:1s;
        top: 10px;
        left: 100px;
        
    }
    .liuxin:nth-child(2){
        animation-delay:2s;
        top: 200px;
        left: 300px;
        
    }
    .liuxin:nth-child(3){
        animation-delay:1.5s;
        top: 200px;
        left: 800px;
    }
    .liuxin:nth-child(4){
        top: 100px;
        left: 500px;
    }
    .liuxin:nth-child(5){
        animation: delay 1em; 
        top: 300px;
        left: 600px;
    }
    .liuxin:nth-child(6){
        animation-delay:2.5s;
        top: 50px;
        left: 800px;
    }
    .liuxin:nth-child(7){
        top: 20px;
        right: 900px;
    }
    .liuxin:nth-child(8){
        animation-delay:1s;
        top: 50px;
        left: 600px;
    }
    .liuxin:nth-child(9){
        animation-delay:0.5s;
        top: 200px;
        left: 100px;
    }
    .liuxin:nth-child(10){
        animation-delay:1.5s;
        top: 20px;
        left: 500px;
    }
    .liuxin:nth-child(11){
        top: 150px;
        left: 200px;
    }
    .liuxin:nth-child(12){
        animation-delay:1.2s;
        top: 200px;
        right: 400px;
    }
    .liuxin:nth-child(12){
        top: 100px;
        left: 350px;
    }
    .box{
        position: absolute;
        top: 50px;
        left:800px;
        width: 400px;
        height: 400px;
        margin: 50px auto;
      /*   background-color: brown; */
        animation: heat 2s infinite alternate;
        z-index:9999;
        overflow:visible;               /*恢复 超出边框隐藏*/ 
    }
    .left{
        position:absolute;
        top: 20px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(-45deg);
        background-color: red;
        box-shadow: -30px  -20px 20px  20px pink;  /*X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。*/
        
    }
    .right{
        position:absolute;
        top: 20px;
        left: 70px;
        width: 200px;
        height: 300px;
        border-radius: 300px 300px 0 0; /*左上角  右上角  右下角  左下角*/
        transform: rotate(45deg);
        background-color: red;
        box-shadow: 30px -20px 20px 20px pink;
    }

    .box .p1 {
                position: absolute;
                right: 160px;
                bottom: 200px;
                background-color: red;
                width: 200px;
                height: 30px;
                font: bold 25px/30px"";
                text-align: center;
                color: #fff;
            }
    .box .p2{
                position: absolute;
                right: 160px;
                bottom: 240px;
                background-color: red;
                width: 200px;
                height: 30px;
                font: bold 25px/30px"";
                text-align: center;
                color: #fff;
    }    

        
        /*爱心跳动动画*/
    @keyframes heat{
        0%{
            transform: scale(1);    /*transform:scale（）  缩放;*/ 
        }
        50%{
            transform: scale(1.2);
        }
        100%{
            transform: scale(1);
        }
    }
        /*流星动画*/
    @keyframes liu{
        0%{
            transform: translate(0px ,0px)  rotate(-45deg);
            height: 0;
            
        }
        50%{
            transform: translate(350px ,350px)  rotate(-45deg);
            height: 200px;
        }
        100%{
            transform: translate(700px ,700px)  rotate(-45deg);
            height: 0;
        }
    }
  
</style>
<body>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="liuxin"></div>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <p class="p1">情人节快乐</p>
        <p class="p2">I Love You</p>
    </div>
</body>
</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

四：总结

新手上路，自己做的很烂，没啥可说的，刚开始学习前端，刚好马上又是七夕节，记录一下自己的理解和学习过程吧！欢迎各位莅临指正。。
　　我觉得，学习ｈｔｍｌ和ｃｓｓ主要是对页面的布局有一个整体的分析和理解，对页面的设计有个大体思路，在开始做比较好，思考那些地方应该用定位和ｆｌｏａｔ：ｌｅｆｔ等等，写到一半改代码好烦的！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/204166