css3绘制简易的文件夹图标,鼠标悬停文件夹打开动画特效。
HTML代码
<div class="folder">
<div class="paper one"></div>
<div class="paper two"></div>
<div class="paper three"></div>
<div class="paper four"></div>
</div>
CSS代码
<style>
body {
background-color:#1e1f26;
}
body .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;
}
body .folder:before {
width:55px;
height:25px;
border-radius:5px;
content:'';
background-color:#FFD485;
position:absolute;
top:-10px;
left:0px;
}
body .folder:after {
display:block;
width:200px;
height:150px;
border-radius:10px;
content:'';
transform:skew(0deg);
background-color:#ffe1a8;
transition:all .2s;
}
body .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;
}
body .folder .paper.one {
background-color:#ffadad;
}
body .folder .paper.two {
background-color:#ffd6a5;
}
body .folder .paper.three {
background-color:#fdffb6;
}
body .folder .paper.four {
background-color:#9bf6ff;
}
body .folder:hover:after {
transform:skew(-20deg);
margin-left:25px;
}
body .folder:hover .paper:nth-child(1) {
transform:rotate(10deg) translate(-80px,-80px);
}
body .folder:hover .paper:nth-child(2) {
transform:rotate(20deg) translate(-80px,-80px);
}
body .folder:hover .paper:nth-child(3) {
transform:rotate(30deg) translate(-80px,-80px);
}
body .folder:hover .paper:nth-child(4) {
transform:rotate(40deg) translate(-80px,-80px);
}
</style>