Pure CSS Animated Folder Icon

Developer
Karl Saunders
Size
3,019 Kb
Views
36,432
  1. Pure CSS Animated Folder Icon Previews
  2. Pure CSS Animated Folder Icon HTML Codes
  3. Pure CSS Animated Folder Icon CSS Codes
  4. Pure CSS Animated Folder Icon JS Codes

How do I make an pure css animated folder icon?

Pure CSS animated folder icon I created for an admin panel directory structure plugin.Fully responsive - just change the width variable to see.. What is a pure css animated folder icon? How do you make a pure css animated folder icon? This script and codes were developed by Karl Saunders on 20 November 2022, Sunday.

Pure CSS Animated Folder Icon Previews
IQ Test

Pure CSS Animated Folder Icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Animated Folder Icon</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,300,500'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label class="folder">	<input type="checkbox"/>	<span></span>
</label> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Animated Folder Icon - Script Codes CSS Codes

input { opacity: 0;
}
label { cursor: pointer;
}
body { width: 100vw; height: 100vh; margin: 0; font-family: 'Roboto'; color: #111; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.folder { position: relative; width: 150px; height: calc(150px / 100 * 75); -webkit-perspective: 750px; perspective: 750px;
}
.folder span::before,
.folder span::after,
.folder::before,
.folder::after { position: absolute; content: ""; border-radius: calc(150px / 100 * 5);
}
.folder::before { width: 100%; height: 92%; bottom: 0; background-color: #cca352;
}
.folder span::after { width: 90%; height: 85%; bottom: 0; left: 5%; background-color: #fff; z-index: 2; -webkit-transition: -webkit-transform 250ms ease 0ms; transition: -webkit-transform 250ms ease 0ms; transition: transform 250ms ease 0ms; transition: transform 250ms ease 0ms, -webkit-transform 250ms ease 0ms; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
}
.folder span::before { background-color: #ffcc66; width: 100%; height: 92%; bottom: 0; left: 0; z-index: 3; content: 'Click me...'; -webkit-transition: -webkit-transform 500ms ease 0ms; transition: -webkit-transform 500ms ease 0ms; transition: transform 500ms ease 0ms; transition: transform 500ms ease 0ms, -webkit-transform 500ms ease 0ms; -webkit-transform-origin: 0 100% 0; transform-origin: 0 100% 0; outline: 1px solid transparent; /* Firefox anti-aliasing hack */ -webkit-transform-style: preserve-3d; transform-style: preserve-3d; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.folder::after { top: 0; left: 0; width: 40%; height: 50%; background-color: #cca352; z-index: 1;
}
.folder input:checked + span::before { -webkit-transform: rotateX(-35deg); transform: rotateX(-35deg);
}

Pure CSS Animated Folder Icon - Script Codes JS Codes

/* Just click the folder */
Pure CSS Animated Folder Icon - Script Codes
Pure CSS Animated Folder Icon - Script Codes
Home Page Home
Developer Karl Saunders
Username Mobius1
Uploaded November 20, 2022
Rating 3
Size 3,019 Kb
Views 36,432
Do you need developer help for Pure CSS Animated Folder Icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Karl Saunders (Mobius1) Script Codes
Name
Pure CSS Sci-Fi Loader
Vanilla DataTables Demo
Classic Snake in Vanilla Javascript
Pure CSS Comma-seperated List
Solitaire Win Animation
One-Time Events
Static vs. Live NodeList
Glitchy Text
A Pen by Karl Saunders
Pure CSS Tooltips
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!