-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path++index.html
103 lines (82 loc) · 2.39 KB
/
++index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Rookie</title>
<style type="text/css">
*{
margin:0;padding:0;
}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{
margin:0;
}
a{
text-decoration:none;color: inherit;
}
img{display: block;border:none;
}
ol,ul{
list-style:none;
}
.clearfix:after {
content: "";display: block;clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
html{
height: 90%; background: -webkit-radial-gradient(center,#153170,#000);
}
.heart{
position: relative; width: 220px; height: 220px; margin: 100px auto;transform: rotate(45deg); animation: move 2s infinite alternate ;
}
.heart div{
position: absolute; width: 150px; height: 150px; background: red;
}
.heart .norotate{
right: 0; bottom: 0; width: 150px; height: 150px;
}
.heart .middle{
right: 0; bottom: 0; width: 150px; height: 150px;
}
.heart .left{
left: 0; bottom: 0; border-radius: 50%;
}
.heart .right{
top: 0; right: 0;border-radius: 50%;
}
.heart p{
width: 200px; height: 30px; font: bold 25px/30px "";text-align:center; color: #fff;
}
.heart p{
position: absolute; right: 0; bottom: 85px; transform: rotate(-45deg);
}
@-webkit-keyframes move{
10%{ transform: rotate(45deg) scale(1.1); text-shadow: 0 0 5px #fff; }
20%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
30%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
40%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
50%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
60%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 5px #fff; }
70%{ transform: rotate(45deg) scale(1.3); text-shadow: 0 0 5px #fff; }
80%{ transform: rotate(45deg) scale(1.2); text-shadow: 0 0 10px #fff;}
90%{ transform: rotate(45deg) scale(1.1);}
}
</style>
</head>
<body>
<div class="heart">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
<!-- <p> <br/><br/></p> -->
</div>
</body>
</html>