Skip to content

Commit 74ba468

Browse files
ps011ps011
committed
day97: icon animation
1 parent 2561bb0 commit 74ba468

5 files changed

Lines changed: 283 additions & 0 deletions

File tree

‎Day97-Icon Animation/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Icon Animation</title>
6+
<link rel="stylesheet" href="styles.css">
7+
</head>
8+
<body>
9+
<div class="frame">
10+
<input id="cb" type="checkbox" /><label class="label" for="cb"></label>
11+
<div class="bg"></div>
12+
<div class="icon"></div>
13+
<div class="ring"></div>
14+
<div class="stripes">
15+
<div class="stripe stripe-1"></div>
16+
<div class="stripe stripe-2"></div>
17+
<div class="stripe stripe-3"></div>
18+
<div class="stripe stripe-4"></div>
19+
<div class="stripe stripe-5"></div>
20+
<div class="stripe stripe-6"></div>
21+
<div class="stripe stripe-7"></div>
22+
<div class="stripe stripe-8"></div>
23+
<div class="stripe stripe-9"></div>
24+
<div class="stripe stripe-10"></div>
25+
<div class="stripe stripe-11"></div>
26+
<div class="stripe stripe-12"></div>
27+
<div class="stripe stripe-13"></div>
28+
<div class="stripe stripe-14"></div>
29+
<div class="stripe stripe-15"></div>
30+
<div class="stripe stripe-16"></div>
31+
<div class="stripe stripe-17"></div>
32+
<div class="stripe stripe-18"></div>
33+
</div>
34+
</div>
35+
</body>
36+
</html>

‎Day97-Icon Animation/styles.css‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
.frame {
2+
position: absolute;
3+
top: 50%;
4+
left: 50%;
5+
width: 400px;
6+
height: 400px;
7+
margin-top: -200px;
8+
margin-left: -200px;
9+
border-radius: 2px;
10+
box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.2);
11+
overflow: hidden;
12+
background: #27ae60;
13+
color: #fff;
14+
font-family: 'Open Sans', Helvetica, sans-serif;
15+
-webkit-font-smoothing: antialiased;
16+
-moz-osx-font-smoothing: grayscale;
17+
}
18+
19+
#cb {
20+
display: none;
21+
}
22+
23+
#cb:checked ~ .bg {
24+
-webkit-transform: scale(1);
25+
transform: scale(1);
26+
}
27+
#cb:checked ~ .ring, #cb:checked ~ .stripes {
28+
opacity: 0;
29+
-webkit-transform: scale(1);
30+
transform: scale(1);
31+
-webkit-transition: opacity 0.3s ease-out 0.3s, -webkit-transform 0.6s ease-out;
32+
transition: opacity 0.3s ease-out 0.3s, -webkit-transform 0.6s ease-out;
33+
transition: transform 0.6s ease-out, opacity 0.3s ease-out 0.3s;
34+
transition: transform 0.6s ease-out, opacity 0.3s ease-out 0.3s, -webkit-transform 0.6s ease-out;
35+
}
36+
#cb:checked ~ .icon {
37+
border-radius: 0;
38+
-webkit-transform: rotate(180deg) scale(1.1);
39+
transform: rotate(180deg) scale(1.1);
40+
box-shadow: -4px -8px 16px rgba(0, 0, 0, 0.2);
41+
}
42+
43+
.label {
44+
position: absolute;
45+
z-index: 10;
46+
top: 0;
47+
left: 0;
48+
right: 0;
49+
bottom: 0;
50+
cursor: pointer;
51+
}
52+
53+
.bg {
54+
position: absolute;
55+
width: 600px;
56+
height: 600px;
57+
top: -100px;
58+
left: -100px;
59+
background: #2ecc71;
60+
border-radius: 50%;
61+
-webkit-transform: scale(0);
62+
transform: scale(0);
63+
-webkit-transition: all 0.6s ease-in-out;
64+
transition: all 0.6s ease-in-out;
65+
}
66+
67+
.icon {
68+
position: absolute;
69+
width: 30px;
70+
height: 30px;
71+
top: 185px;
72+
left: 185px;
73+
background: #fff;
74+
border-radius: 50%;
75+
-webkit-transition: all 0.6s ease-in-out;
76+
transition: all 0.6s ease-in-out;
77+
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
78+
}
79+
80+
.ring {
81+
box-sizing: border-box;
82+
position: absolute;
83+
width: 150px;
84+
height: 150px;
85+
top: 125px;
86+
left: 125px;
87+
border: 5px solid #fff;
88+
border-radius: 50%;
89+
-webkit-transform: scale(0);
90+
transform: scale(0);
91+
-webkit-transition: opacity 0.3s ease-in, -webkit-transform 0.6s ease-in;
92+
transition: opacity 0.3s ease-in, -webkit-transform 0.6s ease-in;
93+
transition: transform 0.6s ease-in, opacity 0.3s ease-in;
94+
transition: transform 0.6s ease-in, opacity 0.3s ease-in, -webkit-transform 0.6s ease-in;
95+
}
96+
97+
.stripes {
98+
position: absolute;
99+
width: 300px;
100+
height: 300px;
101+
top: 50px;
102+
left: 50px;
103+
-webkit-transform: scale(0);
104+
transform: scale(0);
105+
-webkit-transition: opacity 0.3s ease-in, -webkit-transform 0.6s ease-in;
106+
transition: opacity 0.3s ease-in, -webkit-transform 0.6s ease-in;
107+
transition: transform 0.6s ease-in, opacity 0.3s ease-in;
108+
transition: transform 0.6s ease-in, opacity 0.3s ease-in, -webkit-transform 0.6s ease-in;
109+
}
110+
.stripes .stripe {
111+
position: absolute;
112+
height: 26px;
113+
width: 4px;
114+
background: #fff;
115+
top: 137px;
116+
left: 148px;
117+
}
118+
.stripes .stripe-1 {
119+
-webkit-transform: rotate(20deg) translateY(-120px);
120+
transform: rotate(20deg) translateY(-120px);
121+
}
122+
.stripes .stripe-2 {
123+
-webkit-transform: rotate(40deg) translateY(-120px);
124+
transform: rotate(40deg) translateY(-120px);
125+
}
126+
.stripes .stripe-3 {
127+
-webkit-transform: rotate(60deg) translateY(-120px);
128+
transform: rotate(60deg) translateY(-120px);
129+
}
130+
.stripes .stripe-4 {
131+
-webkit-transform: rotate(80deg) translateY(-120px);
132+
transform: rotate(80deg) translateY(-120px);
133+
}
134+
.stripes .stripe-5 {
135+
-webkit-transform: rotate(100deg) translateY(-120px);
136+
transform: rotate(100deg) translateY(-120px);
137+
}
138+
.stripes .stripe-6 {
139+
-webkit-transform: rotate(120deg) translateY(-120px);
140+
transform: rotate(120deg) translateY(-120px);
141+
}
142+
.stripes .stripe-7 {
143+
-webkit-transform: rotate(140deg) translateY(-120px);
144+
transform: rotate(140deg) translateY(-120px);
145+
}
146+
.stripes .stripe-8 {
147+
-webkit-transform: rotate(160deg) translateY(-120px);
148+
transform: rotate(160deg) translateY(-120px);
149+
}
150+
.stripes .stripe-9 {
151+
-webkit-transform: rotate(180deg) translateY(-120px);
152+
transform: rotate(180deg) translateY(-120px);
153+
}
154+
.stripes .stripe-10 {
155+
-webkit-transform: rotate(200deg) translateY(-120px);
156+
transform: rotate(200deg) translateY(-120px);
157+
}
158+
.stripes .stripe-11 {
159+
-webkit-transform: rotate(220deg) translateY(-120px);
160+
transform: rotate(220deg) translateY(-120px);
161+
}
162+
.stripes .stripe-12 {
163+
-webkit-transform: rotate(240deg) translateY(-120px);
164+
transform: rotate(240deg) translateY(-120px);
165+
}
166+
.stripes .stripe-13 {
167+
-webkit-transform: rotate(260deg) translateY(-120px);
168+
transform: rotate(260deg) translateY(-120px);
169+
}
170+
.stripes .stripe-14 {
171+
-webkit-transform: rotate(280deg) translateY(-120px);
172+
transform: rotate(280deg) translateY(-120px);
173+
}
174+
.stripes .stripe-15 {
175+
-webkit-transform: rotate(300deg) translateY(-120px);
176+
transform: rotate(300deg) translateY(-120px);
177+
}
178+
.stripes .stripe-16 {
179+
-webkit-transform: rotate(320deg) translateY(-120px);
180+
transform: rotate(320deg) translateY(-120px);
181+
}
182+
.stripes .stripe-17 {
183+
-webkit-transform: rotate(340deg) translateY(-120px);
184+
transform: rotate(340deg) translateY(-120px);
185+
}
186+
.stripes .stripe-18 {
187+
-webkit-transform: rotate(360deg) translateY(-120px);
188+
transform: rotate(360deg) translateY(-120px);
189+
}
190+
191+
@-webkit-keyframes background {
192+
0% {
193+
-webkit-transform: scale(0);
194+
transform: scale(0);
195+
}
196+
100% {
197+
-webkit-transform: scale(1);
198+
transform: scale(1);
199+
}
200+
}
201+
202+
@keyframes background {
203+
0% {
204+
-webkit-transform: scale(0);
205+
transform: scale(0);
206+
}
207+
100% {
208+
-webkit-transform: scale(1);
209+
transform: scale(1);
210+
}
211+
}

‎images/day97.png‎

25.4 KB
Loading

‎index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2090,6 +2090,31 @@ <h1 class="card__title">Puppet</h1>
20902090
</a>
20912091
</div>
20922092

2093+
<!-- DAY 97 -->
2094+
2095+
<div class="card">
2096+
<div class="card__image-container">
2097+
<span class="tag">DAY 97</span>
2098+
<img class="card__image" src="./images/day97.png" alt="">
2099+
</div>
2100+
2101+
<svg class="card__svg" viewBox="0 0 800 500">
2102+
2103+
<path
2104+
d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400 L 800 500 L 0 500"
2105+
stroke="transparent" fill="#333" />
2106+
<path class="card__line"
2107+
d="M 0 100 Q 50 200 100 250 Q 250 400 350 300 C 400 250 550 150 650 300 Q 750 450 800 400" stroke="pink"
2108+
stroke-width="3" fill="transparent" />
2109+
</svg>
2110+
<a href="./Day97-Icon Animation/index.html">
2111+
<div class="card__content">
2112+
<h1 class="card__title">Icon Animation</h1>
2113+
<p></p>
2114+
</div>
2115+
</a>
2116+
</div>
2117+
20932118

20942119

20952120
</div>

‎log.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1+
### Day 97: Tuesday, 21st July 2020
2+
3+
**Goal**: Create a Icon Animation
4+
5+
6+
**Today's Progress**: Created the page and deployed to heroku
7+
8+
**Thoughts:**
9+
10+
**Links to work:**
11+
112
### Day 96: Monday, 20th July 2020
213

314
**Goal**: Create a Puppet

0 commit comments

Comments
 (0)