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

夹

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

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

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

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

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

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

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

 

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

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

  1. <div class="photo_area" >
  2. 		<div class="photo_box3" data-type="mark">
  3. 			<div class="photo_content tc"><img src="./images/mark.png"><aside>书签夹</aside></div>
  4. 		</div>
  5. 		<div class="photo_box2" data-type="wall">
  6. 			<div class="photo_content tc"><img src="./images/wall.png"><aside>照片墙</aside></div>
  7. 		</div>
  8. 		<div class="photo_box" data-type="normal">
  9. 			<div class="photo_content tc"><img src="./images/photos/Nature/index.jpg"><aside>风景</aside></div>
  10. 		</div>
  11. 	</div>

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

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

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

 

  1. .photo_area:hover{
  2. 	.photo_box{
  3. 		.getTransform(rotate(-9deg));
  4. 	}
  5. 	.photo_box2{
  6. 		.getTransform(rotate(-2deg));
  7. 	}
  8. 	.photo_box3 {
  9. 		.getTransform(rotate(5deg));
  10. 	}
  11. }

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

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

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

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

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

然后是点击后的效果。

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

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

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

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

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

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

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

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

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

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

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

posted @ 2015-07-04 14:11  mfrbuaa  阅读(139)  评论(0)  编辑  收藏  举报