feat: Add new icon Animation Effect "Folder Open"

seungyeub · seungyeub · commit 5169ce879352 · 2020-11-08T15:57:02.000+09:00
diff --git a/icon/folder-open-effect/index.html b/icon/folder-open-effect/index.html
@@ -11,12 +11,12 @@
 
 <body>
     <div class="folder">
-        <div class="folder__back">
+        <div class="folder_back">
             <div class="paper"></div>
             <div class="paper"></div>
             <div class="paper"></div>
-            <div class="folder__front"></div>
-            <div class="folder__front right"></div>
+            <div class="folder_front"></div>
+            <div class="folder_front right"></div>
         </div>
     </div>
 </body>
diff --git a/icon/folder-open-effect/style.css b/icon/folder-open-effect/style.css
@@ -12,14 +12,14 @@ body {
 .folder {
   transition: all 0.2s ease-in;
 }
-.folder__back {
+.folder_back {
   position: relative;
   width: 100px;
   height: 80px;
   background: #47c5ff;
   border-radius: 0px 5px 5px 5px;
 }
-.folder__back::after {
+.folder_back::after {
   content: "";
   position: absolute;
   bottom: 98%;
@@ -29,7 +29,7 @@ body {
   background: #47c5ff;
   border-radius: 5px 5px 0 0;
 }
-.folder__back .paper {
+.folder_back .paper {
   position: absolute;
   bottom: 10%;
   left: 50%;
@@ -40,17 +40,17 @@ body {
   border-radius: 5px;
   transition: all 0.3s ease-in-out;
 }
-.folder__back .paper:nth-child(2) {
+.folder_back .paper:nth-child(2) {
   background: #f2f2f2;
   width: 80%;
   height: 70%;
 }
-.folder__back .paper:nth-child(3) {
+.folder_back .paper:nth-child(3) {
   background: white;
   width: 90%;
   height: 60%;
 }
-.folder__back .folder__front {
+.folder_back .folder_front {
   position: absolute;
   width: 100%;
   height: 100%;
@@ -65,7 +65,7 @@ body {
 .folder:hover .paper {
   transform: translate(-50%, 0%);
 }
-.folder:hover .folder__front {
+.folder:hover .folder_front {
   transform: skew(15deg) scaleY(0.6);
 }
 .folder:hover .right {
