-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathheart.html
140 lines (129 loc) · 3.52 KB
/
heart.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{padding:0;margin: 0;}
html{height:100%;overflow: hidden;}
body{width: 100%;
overflow: hidden;
height: 100%;
background: url(img/hread.jpg) no-repeat;
background-size:100% 100%;
}
.heart{
position: relative;
width:150px;
height: 150px;
margin: 200px auto;
transform: rotate(45deg);
animation: move 2s infinite alternate ;
/* infinite 无限 */
/* alternate 交替 */
}
.heart > div{
position: absolute;
width:100px;
height: 100px;
background:red;
}
.left{
left: 0;
bottom: 0;
border-radius: 50%;
/* 切圆角 */
}
.middle{
right:0;
bottom: 0;
width:100px;
height: 100px;
}
.right{
top:0;
right:0;
border-radius: 50%;
}
.heart P{
width: 200px;
height: 30px;
color:white;
font:bold 25px/30px "";
text-align: center;
}
.heart P{
position: absolute;
right: -40px;
bottom:50px;
transform:rotate(-45deg);
}
@keyframes move{
10%{transform:rotate(45deg) scale(1.1);text-shadow: 0 0 15px #fff;}
20%{transform:rotate(45deg) scale(1.2);text-shadow: 0 0 15px #fff;}
30%{transform:rotate(45deg) scale(1.3);text-shadow: 0 0 15px #fff;}
40%{transform:rotate(45deg) scale(1.3);text-shadow: 0 0 15px #fff;}
50%{transform:rotate(45deg) scale(1.5);text-shadow: 0 0 15px #fff;}
60%{transform:rotate(45deg) scale(1.3);text-shadow: 0 0 15px #fff;}
70%{transform:rotate(45deg) scale(1.2);text-shadow: 0 0 15px #fff;}
80%{transform:rotate(45deg) scale(1.3);text-shadow: 0 0 15px #fff;}
90%{transform:rotate(45deg) scale(1.1);text-shadow: 0 0 15px #fff;}
/* 2s 0-1 */
}
.audio{
position: absolute;
top:70%;
left: 50%;
transform: translate(-50%,-50%)
}
/* 爱心飘落的CSS */
.snowfall-flakes{ /* id选择器 #id名称*/
position:relative; /*相对定位 定位父级*/
width:20px; /*宽度:100px*/
height:18px; /*高度:80px*/
}
.snowfall-flakes:after,.snowfall-flakes:before {
position:absolute;/*绝对定位 */
left:14px;
top:10px;
display:block;
content:''; /*启动盒子*/
width:10px;
height:16px;
background:#ff0000;
/* 圆角:左上角 右上角 右下角 左下角 */
border-radius:50px 50px 0 0;
transform:rotate(45deg);/*css3 变形 :旋转 */
}
.snowfall-flakes:before{
left:10px;
transform:rotate(-45deg);
}
</style>
</head>
<body>
<audio controls="controls" loop="loop" class="audio">
<source src="Beautiful.mp3" />
</audio>
<div class="heart">
<div class="left">
</div>
<div class="middle" >
</div>
<div class="right">
</div>
<p>
I LOVE YOU
</p>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/snowfall.jquery.js"></script>
<script>
$(document).snowfall({
flakeCount:30
})
</script>
</body>
</html>