css文件夹打开动画

下载代码

html

css

分享到微信朋友圈

html

css

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);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg