CSS3实现类mac风格的文件夹打开效果

墨蓝 2022-02-27 11:34 495阅读 0赞

1.效果分析

纯css实现的类mac风格的文件夹打开效果，效果下图所示，具体效果参见[demo][]。代码解析简单起见，使用prefixfree来搞定浏览器前缀。

主要使用linear-gradient、border-radius、box-shadows实现绘图，使用transform、transition实现动画。

![20130504195431642][]![20130504195409579][]

2.技术难点

![20130504195930322][]

难点1在于利用before和after伪类实现图形绘图，难点2在于3d动画的实现。

3.实现步骤

a.html架构

html非常简单，folder用作容器，div.front和div.back分别实现文件夹的两个面。back面的标签用.back:before实现，back下面的阴影效果用.back:after实现。

b.容器folder的实现

.folder{
    	/*实现容器的水平、垂直居中对齐*/
    	width: 160px;
    	height: 140px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin: -70px 0 0 -80px;
    	z-index: 0;
    	/*设置3d动画的类型和透视*/
            perspective: 600px;
    	transform-style: preserve-3d;
    }

最后两句仅仅是为了实现动画效果，如果不需要3d的动画效果，可以省略。perspective可参见[css3 transform的perspective属性][css3 transform_perspective]。

c.容器下面div的统一设置

.folder div{
    	width: 150px;
    	height: 120px;
    	background-color: #93BAD8;
    	position:absolute;
    	top: 0;
    	left: 0;
    }

d.font的设置

.folder .front{
    	background-image: linear-gradient(center top, #93BAD8 0%, #6C9DC0 85%, #628FAF 100%);
    	border-radius: 5px 5px 0 0;
    	box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.35) inset;
    	z-index: 10;
    	transform: rotateX(-30deg);
    	transform-origin: 50% 100% 0;
    	transition:all 1s ease;
    }
    .folder:hover .front{
    	transform: rotateX(-50deg);
    	cursor: pointer;
    }

div.front需要设置渐变、圆角和3d方向的旋转rotateX，因为hover之后要做动画，所以需要设置transition。

e.back的设置

.folder .back{
    	background-image: linear-gradient(center top , #93BAD8 0%, #89AFCC 10%, #5985A5 60%);
    	border-radius: 0 5px 0 0;
    	box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.15);
    }
    .folder .back:before{
    	content:" ";
    	width: 60px;
    	height: 10px;
    	border-radius: 4px 4px 0 0;
    	background-color: #93BAD8;
    	position: absolute;
    	left: 0;
    	top: -10px;
    }
    .folder .back{
    	background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);    
    	border-radius:0 5px 0 0;
    	box-shadow:0 -1px 1px rgba(0,0,0,0.15);
    }

完工！

感谢tutorialzine.com提供灵感，前端开发whqet制作。

[demo]: http://gx.zptc.cn/whqet/animatedFolder.html
[20130504195431642]: https://img-blog.csdn.net/20130504195431642
[20130504195409579]: /images/20220227/e3b8514464e34bcf9a55a5f786a53989.png
[20130504195930322]: /images/20220227/b6c39c20d66f4c71bdae0e6634cbeeaa.png
[css3 transform_perspective]: http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/