做一个小淘气轮廓--文章和论文专辑

夹

做一个小淘气轮廓--菜单章

做一个略调皮的个人主页--结构篇

做一个略调皮的个人主页--相冊与随笔篇

总算在北京找到个廉价的房子租了，算是稳定下来啦。

新工作的节奏本来非常快，有些不适用的，后来UI的方案被老大给毙了。我就又无所事事了··· 

多谢帮我加文件夹的人，尽管我如今都不知道是谁=。=

至于ie8兼容性，事实上就是opacity这个属性的问题。其余ie8都应该没问题。这儿就不改啦。

这一篇主要主要说的是css3的效果，以我的相冊和我的随笔为例。

相冊是有三种展开模式，各自是相冊模式，照片墙模式以及手风琴模式。详细的形成就不说了，仅仅说一下相冊的hover事件还有展开效果。

<div class="photo_area" >
		<div class="photo_box3" data-type="mark">
			<div class="photo_content tc"><img src="./images/mark.png"><aside>书签夹</aside></div>
		</div>
		<div class="photo_box2" data-type="wall">
			<div class="photo_content tc"><img src="./images/wall.png"><aside>照片墙</aside></div>
		</div>
		<div class="photo_box" data-type="normal">
			<div class="photo_content tc"><img src="./images/photos/Nature/index.jpg"><aside>风景</aside></div>
		</div>
	</div>

 这是一个相冊的html代码，一个area里面有三个box，分别就是展开的三张，然后我们加入css3的动画效果。

首先是。当鼠标移动到area上的时候。三个box的旋转。

.photo_area{
	width:164px;height:212px;position:relative;margin:0 40px 50px;float:left;cursor:pointer;
	.photo_box{ 
		width:100%;height:100%;z-index:1;position:absolute;top:0px;left:0px;background:#FFF;
		.getBoxShdow(1px 1px 3px #333);
		.getTransformOrgin(0% 100%);
		.geTtransition(all @animateTime*2 ease);	
	}
}

.photo_area:hover{
	.photo_box{
		.getTransform(rotate(-9deg));
	}
	.photo_box2{
		.getTransform(rotate(-2deg));
	}
	.photo_box3 {
		.getTransform(rotate(5deg));
	}
}

 注意一下，正常的rotate都是以中心为中心的（有点绕口···）。我们要的效果时以右下角为中心。所以须要加上 transform-orgin的属性。

然后是 area的hover 下。三个box的反应。

之后是box的hover时间。当box hover的时候。他要到最上方。覆盖掉其余两个。所以另一下代码：

.photo_box2:hover,.photo_box3:hover{
	z-index:2;
}

 这样大体的鼠标hover的效果就好了。

然后是点击后的效果。

点击后飘的那个效果可拆分为三个动作，各自是旋转。放大。定位。

旋转的话，旋转的话即旋转90度就可以。

放大的话，仅仅要获取窗体的宽和高然后做 一下处理就可以。

定位的话，须要算出该area相对于窗体。定位是多少。用offset就可以。然后将这个top以及left的值的负数给到点击的那个box上，css给area一个position：relative，这样让box相对于area定位，那么他的top以及left 变成了 area相对于窗体定位的负值。这个box就会定位到窗体的左上角。

这三个动作同一时候进行，就达到了我们预想的效果。

随笔的三个button式css做的。整个加了圆角和阴影，里面加一个半白色的梯度渐变，就是所呈现的效果啦。

.article_menu_btn{
			width:180px;height:180px;overflow:hidden;cursor:pointer;position:absolute;top:0px;left:0px;
			.getBorderRadius(90px);
			.getBoxShdow(2px 2px 5px #000);
			.geTtransition2(all @animateTime/2 ease, background @animateTime ease);
			span{
				width:150px;height:150px;margin:15px;display:block;
				.getBorderRadius(75px);
				.getGradient(top,rgba(255,255,255,.2), rgba(255,255,255,0));
			}
			span:after{
				content:'';width:100%;height:100%;display:block;opacity:.8;
			}
		}

 之后的文章的展开效果与相冊类似。仅仅只是没有旋转，就两个动作。定位，以及添加高度。

这样大体上的效果就呈现出来啦。

阅读原文：做一个小淘气轮廓--文章和论文专辑

版权声明：本文博客原创文章，博客，未经同意，不得转载。