css文件夹打开特效代码

最新推荐文章于 2024-04-21 10:00:27 发布

裴嘉靖

最新推荐文章于 2024-04-21 10:00:27 发布

阅读量518

点赞数 2

分类专栏： css3 文章标签： css css3 javascript

本文链接：https://blog.csdn.net/peijiajing/article/details/122541482

版权

css3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>

裴嘉靖

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css文件夹打开特效代码

<!doctype html><html> <head> <meta charset="utf-8"> <title></title> <style> body { background-color: #000; } .folder { cursor: pointer; position: absolute; top: 50%; left: 50%.
复制链接

扫一扫