<div id="readability-page-1" class="page"><div>
                <div id="SE-3f6de217-c3cd-4b31-b945-31d532c54328">
                            <blockquote>
                                <div><p id="SE-7a2f0b8e-2378-4a7e-b8b0-bbf77f747bad"><span id="SE-4d530ea2-0da9-4e25-b880-b7d3615b0766">[Web] Pure CSS Icon Effect </span></p><p id="SE-11c159df-5489-4fee-9898-fdc68c405346"><span id="SE-f56fbffb-1975-4395-a900-b0d44f9edd37">- Folder Open Animation Effect</span></p></div>
                            </blockquote>
                        </div>
                <div id="SE-be13e3e3-725c-499e-8f99-61ac72de076e">

                                <p><a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-be13e3e3-725c-499e-8f99-61ac72de076e&quot;, &quot;src&quot; : &quot;https://mblogthumb-phinf.pstatic.net/MjAyMDExMDRfNzkg/MDAxNjA0NDYwNDE5Mzg3.d_4Cghaz4t8PpUAmhaahlTEtd2n0yxznCrB5CXjCfiYg.geiKXJutBrX1jKsG4rSTbFovAJsRZQC8R0TthEr5Cw4g.GIF.backsajang420/folder-open-effect.gif&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
                                        <img src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMDRfNzkg/MDAxNjA0NDYwNDE5Mzg3.d_4Cghaz4t8PpUAmhaahlTEtd2n0yxznCrB5CXjCfiYg.geiKXJutBrX1jKsG4rSTbFovAJsRZQC8R0TthEr5Cw4g.GIF.backsajang420/folder-open-effect.gif?type=w80_blur" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMDExMDRfNzkg/MDAxNjA0NDYwNDE5Mzg3.d_4Cghaz4t8PpUAmhaahlTEtd2n0yxznCrB5CXjCfiYg.geiKXJutBrX1jKsG4rSTbFovAJsRZQC8R0TthEr5Cw4g.GIF.backsajang420/folder-open-effect.gif?type=w800" data-width="596" data-height="429" alt="">
                                    </a>
                                </p>
                        </div>
                                                <div id="SE-f378616a-2495-4ae9-81d6-5e73d9b47a9e">
                                    <p>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Folder Open Effect&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="folder"&gt;
        &lt;div class="folder_back"&gt;
            &lt;div class="paper"&gt;&lt;/div&gt;
            &lt;div class="paper"&gt;&lt;/div&gt;
            &lt;div class="paper"&gt;&lt;/div&gt;
            &lt;div class="folder_front"&gt;&lt;/div&gt;
            &lt;div class="folder_front right"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</p>
                                </div>                                <div id="SE-82c62f65-df81-4c72-ba3b-4c4613b8238a">
                                    <p>body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  background: #262626;
  display: flex;
  justify-content: center;
  align-items: center;
}

.folder {
  transition: all 0.2s ease-in;
}
.folder_back {
  position: relative;
  width: 100px;
  height: 80px;
  background: #47c5ff;
  border-radius: 0px 5px 5px 5px;
}
.folder_back::after {
  content: "";
  position: absolute;
  bottom: 98%;
  left: 0;
  width: 30px;
  height: 10px;
  background: #47c5ff;
  border-radius: 5px 5px 0 0;
}
.folder_back .paper {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 70%;
  height: 80%;
  background: #e6e6e6;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
}
.folder_back .paper:nth-child(2) {
  background: #f2f2f2;
  width: 80%;
  height: 70%;
}
.folder_back .paper:nth-child(3) {
  background: white;
  width: 90%;
  height: 60%;
}
.folder_back .folder_front {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(116, 213, 252);
  border-radius: 5px;
  transform-origin: bottom;
  transition: all 0.3s ease-in-out;
}
.folder:hover {
  transform: translateY(-8px);
}
.folder:hover .paper {
  transform: translate(-50%, 0%);
}
.folder:hover .folder_front {
  transform: skew(15deg) scaleY(0.6);
}
.folder:hover .right {
  transform: skew(-15deg) scaleY(0.6);
}</p>
                                </div>                                                    </div></div>

Dev-JeromeBaek.

[Web] Pure CSS Icon Effect - Folder Open Animation Effect index.html style.css [reperence] - Code Pen [github] - https://github.com/Dev-JeromeBaek/awesome-web-styling

[Web] Pure CSS Icon Effect - Folder Open Animation Effect

댓글