<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background-color: #000;
}
.folder {
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: #FFD485;
width: 200px;
height: 150px;
border-radius: 10px;
}
.folder:before {
width: 55px;
height: 25px;
border-radius: 5px;
content: '';
background-color: #FFD485;
position: absolute;
top: -10px;
left: 0px;
}
.folder:after {
display: block;
width: 200px;
height: 150px;
border-radius: 10px;
content: '';
transform: skew(0deg);
background-color: #ffe1a8;
transition: all .2s;
}
.folder .paper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
background-color: whitesmoke;
width: 190px;
height: 140px;
transition: all .2s;
}
.folder .paper.one {
background-color: #ffadad;
}
.folder .paper.two {
background-color: #ffd6a5;
}
.folder .paper.three {
background-color: #fdffb6;
}
.folder .paper.four {
background-color: #9bf6ff;
}
.folder:hover:after {
transform: skew(-20deg);
margin-left: 25px;
}
.folder:hover .paper:nth-child(1) {
transform: rotate(10deg) translate(-80px, -80px);
}
.folder:hover .paper:nth-child(2) {
transform: rotate(20deg) translate(-80px, -80px);
}
.folder:hover .paper:nth-child(3) {
transform: rotate(30deg) translate(-80px, -80px);
}
.folder:hover .paper:nth-child(4) {
transform: rotate(40deg) translate(-80px, -80px);
}
</style>
</head>
<body>
<div class="folder">
<div class="paper one"></div>
<div class="paper two"></div>
<div class="paper three"></div>
<div class="paper four"></div>
</div>
</body>
</html>
css文件夹打开特效代码
最新推荐文章于 2023-08-20 14:25:14 发布