-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (109 loc) · 4.88 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
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
<!DOCTYPE html>
<html lang="ja">
<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>amatama.net</title>
<style>
html,
body,
main {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
}
main::before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(egg.png) center center no-repeat;
opacity: 1
}
main svg {
content: "";
position: absolute;
width: 150%;
height: 150%;
top: -25%;
left: -25%;
z-index: -1;
opacity: 0;
}
main:hover::before {
transition: 2s;
opacity: 0
}
main:hover svg {
transition: .5s;
opacity: 1;
animation: 3s ease-in 1s infinite reverse both running slidein;
animation-iteration-count: 1;
}
.footer-container {
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
background-color: #ccc;
}
@keyframes slidein {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
</style>
</head>
<body>
<main>
<svg id="tomachi" xmlns="http://www.w3.org/2000/svg" width="430.7" height="435.2" viewBox="0 0 430.7 435.2">
<defs>
<style>
.cls-1 {
fill: #e74c3c;
}
.cls-2 {
fill: #f1c40f;
}
.cls-3 {
fill: #36393f;
}
.cls-4 {
fill: #fff;
}
</style>
</defs>
<title>tomachi</title>
<path id="tomato" class="cls-1"
d="M219.6,0,183.8,33c-19.9,18.4-38.9,38.2-61.3,53.6L119,89c-15.6,10.9-43.9,25.7-62.7,43C21.9,163.7,0,204.6,0,255,0,364.6,116.2,436.4,216.4,435.2c38.9-.5,91.5-11,136.9-42.6,41.8-29.1,77-73.6,77.4-136.2,0-34.7-9.2-65.7-28.4-92-20.9-28.9-52-51.3-52-51.3Z" />
<path id="cheese" class="cls-2"
d="M219.6,0,177,39.3c-1.6,1.5-2.3,6.2-2.9,8.2a137.1,137.1,0,0,0-5.2,21c-3.3,19-2.9,39.7,6.1,57.2,12.8,24.8,41.6,37,68.3,39.2,31.9,2.6,67.4-12.8,90.5-34.4,5.7-5.4,11.5-11.4,15.5-18.3Z" />
<path id="lefteye" class="cls-3"
d="M108,140.9c-24.1.4-39.7,21.8-45.1,43.4s1.8,51.7,22,64.3c12.4,7.8,28.8,6.9,41.3,0s19.9-18.4,23.7-31.2c0-.2.1-.3.1-.4,6.5-22.6,2.7-53.7-17.5-68.4a40,40,0,0,0-24.1-7.7Z" />
<path id="leftwhite" class="cls-4"
d="M113.8,157.8a17.9,17.9,0,0,0-11.5,4.3c-5.3,4.5-8.6,11-10.7,17.5-.3.8-.5,1.7-.8,2.5-3.6,13.5,1,31,13.2,38.7,13.8,8.8,27.1-5.4,31.4-17.6a53.5,53.5,0,0,0,1.7-6.9c1.9-12.4-2.7-29.7-14.4-36.3A16.8,16.8,0,0,0,113.8,157.8Z" />
<path id="righteye" class="cls-3"
d="M336.3,147.9a41.7,41.7,0,0,0-19.9,4.7c-11.8,6.3-19.5,18-23.5,30.5-.4,1.2-.7,2.4-1,3.6-6.1,23.2-.5,53.9,20.8,68.3,12.1,8.1,28.4,7.7,40.7.4s19-18.8,23.2-31.2l.9-3.1c6.5-22.4-.5-52.1-20.1-66.4A36.3,36.3,0,0,0,336.3,147.9Z" />
<path id="rightwhite" class="cls-4"
d="M327.7,164.7a18.5,18.5,0,0,0-11.5,4.4c-5.3,4.4-8.6,11-10.7,17.4-.3.9-.6,1.8-.8,2.6-3.6,13.4,1,31,13.2,38.7,13.8,8.8,27.1-5.4,31.3-17.6a34.8,34.8,0,0,0,1.7-6.9c2-12.4-2.6-29.7-14.3-36.3A17.9,17.9,0,0,0,327.7,164.7Z" />
<path id="mouth" class="cls-3"
d="M164.7,249.1s-55.6,26-15.2,64.5c44.3,28.5,68.3-12.8,68.3-12.8s24.4,49.5,71.1,14.4c37.1-43.3-21.6-63.5-21.6-63.5s51.1,37.8-5.2,60.6c-28.9,5.4-42.9-37.9-42.9-37.9s-15.9,52.7-57,28.8C126.9,280.4,164.7,249.1,164.7,249.1Z" />
</svg>
<div class="footer-container">Egg photo by <a
href="https://www.irasutoya.com/2013/09/blog-post_5250.html">白い卵のイラスト
-
いらすとや</a><br>
Icon svg by <a href="https://hiratake.dev/">Hiratake</a></div>
</main>
</body>
</html>