Skip to content
This repository was archived by the owner on Feb 19, 2021. It is now read-only.

Commit 585ab1a

Browse files
zwliewzwliew
committed
Test
1 parent 8a28ca5 commit 585ab1a

File tree

2 files changed

+65
-2
lines changed

2 files changed

+65
-2
lines changed

‎index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
</head>
1717
<body>
1818
<header>
19-
<h1 id="heading" class="animated infinite pulse">(〃＾▽＾〃)</h2>
19+
<div class="face">
20+
<h2 id="heading" class="animated infinite pulse">(〃＾▽＾〃)</h2>
21+
</div>
2022
</header>
2123
<main>
2224
<character-gallery characters="data/characters.json"></character-gallery>

‎styles/index.css

+62-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,68 @@ body {
44
flex-direction: column;
55
align-items: center;
66
}
7-
87
#heading {
98
padding: 0.1rem;
9+
padding-top: 180px;
10+
position: absolute;
11+
left: 130px;
1012
}
13+
.face {
14+
width: 400px;
15+
height: 400px;
16+
margin-top: 100px;
17+
position: relative;
18+
background-image: url("https://art.pixilart.com/9c82cb87f9570fb.gif");
19+
animation: SpinLikePro 1s infinite;
20+
}
21+
.face:hover {
22+
background-image: url("https://cdn.dribbble.com/users/823352/screenshots/2927297/bleu-rose-0.1.gif");
23+
cursor: pointer;
24+
}
25+
.animated {
26+
padding-top: 50px;
27+
}
28+
@keyframes SpinLikePro {
29+
0% {
30+
-ms-transform: rotate(0deg);
31+
/* IE 9 */
32+
-webkit-transform: rotate(0deg);
33+
/* Safari 3-8 */
34+
transform: rotate(0deg);
35+
box-shadow: 30px 30px grey;
36+
border-radius: 100%;
37+
}
38+
25% {
39+
-ms-transform: rotate(90deg);
40+
/* IE 9 */
41+
-webkit-transform: rotate(90deg);
42+
/* Safari 3-8 */
43+
transform: rotate(90deg);
44+
border-radius: 100%;
45+
}
46+
50% {
47+
-ms-transform: rotate(180deg);
48+
/* IE 9 */
49+
-webkit-transform: rotate(180deg);
50+
/* Safari 3-8 */
51+
transform: rotate(180deg);
52+
border-radius: 100%;
53+
box-shadow: 30px 30px darkgray;
54+
}
55+
75% {
56+
-ms-transform: rotate(270deg);
57+
/* IE 9 */
58+
-webkit-transform: rotate(270deg);
59+
/* Safari 3-8 */
60+
transform: rotate(270deg);
61+
border-radius: 100%;
62+
}
63+
100% {
64+
-ms-transform: rotate(360deg);
65+
/* IE 9 */
66+
-webkit-transform: rotate(360deg);
67+
/* Safari 3-8 */
68+
transform: rotate(360deg);
69+
border-radius: 100%;
70+
}
71+
}

0 commit comments

Comments
 (0)