Skip to content

Commit 2dfe105

Browse files
seungyeubseungyeub
committed
feat: Add new icon Animation Effect "Folder Open"
1 parent 581bace commit 2dfe105

File tree

6 files changed

+104
-0
lines changed

6 files changed

+104
-0
lines changed

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,8 @@ There will be continuous updates in the future. Thank you!
8080

8181
### Icon
8282

83+
- [Folder Open Effect](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/icon/folder-open-effect)
84+
8385
- [Location Pointer Animation](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/icon/location-pointer-animation)
8486

8587
### Indicator

‎gifs/icon/folder-open-effect.gif

115 KB
Loading

‎icon/README.md

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
# Icon Animation Effect List 😀
22

3+
- [Folder Open Effect](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/icon/folder-open-effect)
4+
35
- [Location Pointer Animation](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/icon/location-pointer-animation)

‎icon/folder-open-effect/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Folder Hover Interaction
2+
3+
![Edit [Web] Folder Open Effect]((../../gifs/icon/folder-open-effect.gif)

‎icon/folder-open-effect/index.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Folder Open Effect</title>
8+
<link rel="shortcut icon" href="../../favicon.ico">
9+
<link rel="stylesheet" type="text/css" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="folder">
14+
<div class="folder__back">
15+
<div class="paper"></div>
16+
<div class="paper"></div>
17+
<div class="paper"></div>
18+
<div class="folder__front"></div>
19+
<div class="folder__front right"></div>
20+
</div>
21+
</div>
22+
</body>
23+
24+
</html>

‎icon/folder-open-effect/style.css

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
width: 100%;
5+
height: 100vh;
6+
background: #262626;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
}
11+
12+
.folder {
13+
transition: all 0.2s ease-in;
14+
}
15+
.folder__back {
16+
position: relative;
17+
width: 100px;
18+
height: 80px;
19+
background: #47c5ff;
20+
border-radius: 0px 5px 5px 5px;
21+
}
22+
.folder__back::after {
23+
content: "";
24+
position: absolute;
25+
bottom: 98%;
26+
left: 0;
27+
width: 30px;
28+
height: 10px;
29+
background: #47c5ff;
30+
border-radius: 5px 5px 0 0;
31+
}
32+
.folder__back .paper {
33+
position: absolute;
34+
bottom: 10%;
35+
left: 50%;
36+
transform: translate(-50%, 10%);
37+
width: 70%;
38+
height: 80%;
39+
background: #e6e6e6;
40+
border-radius: 5px;
41+
transition: all 0.3s ease-in-out;
42+
}
43+
.folder__back .paper:nth-child(2) {
44+
background: #f2f2f2;
45+
width: 80%;
46+
height: 70%;
47+
}
48+
.folder__back .paper:nth-child(3) {
49+
background: white;
50+
width: 90%;
51+
height: 60%;
52+
}
53+
.folder__back .folder__front {
54+
position: absolute;
55+
width: 100%;
56+
height: 100%;
57+
background: rgb(116, 213, 252);
58+
border-radius: 5px;
59+
transform-origin: bottom;
60+
transition: all 0.3s ease-in-out;
61+
}
62+
.folder:hover {
63+
transform: translateY(-8px);
64+
}
65+
.folder:hover .paper {
66+
transform: translate(-50%, 0%);
67+
}
68+
.folder:hover .folder__front {
69+
transform: skew(15deg) scaleY(0.6);
70+
}
71+
.folder:hover .right {
72+
transform: skew(-15deg) scaleY(0.6);
73+
}

0 commit comments

Comments
 (0)