做一個略調皮的個人主頁--相冊與隨筆篇
目錄
做一個略調皮的個人主頁--相冊與隨筆篇
總算在北京找到個便宜的房子租了，算是穩定下來啦。
新工作的節奏本來很快，有些不適用的，后來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就會定位到窗口的左上角。
這三個動作同時進行，就達到了我們預想的效果。
隨筆的三個按鈕式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; } }
之后的文章的展開效果與相冊類似，只不過沒有旋轉，就兩個動作，定位，以及增加高度。
這樣大體上的效果就呈現出來啦。
閱讀原文：做一個略調皮的個人主頁--相冊與隨筆篇
浙公網安備 33010602011771號