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

目录

做一个略调皮的个人主页--菜单篇

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

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

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

新工作的节奏本来很快，有些不适用的，后来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;}}

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

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

阅读原文：做一个略调皮的个人主页--相册与随笔篇

做一个略调皮的个人主页--相册与随笔篇相关推荐

做一个略调皮的个人主页--结构篇
目录做一个略调皮的个人主页--菜单篇做一个略调皮的个人主页--结构篇首先感谢大家这么给面子,看到评论我也特别的开心. 不过要实现声明一下,之前忘记说了,这个设计的灵感来自于某设计公司给某银行做的 ...
Python 用pygame 做一个游戏的开始界面（小白第一篇博客）
Python 用pygame 做一个游戏的开始界面(小白第一篇博客) 主要功能实现本篇文章主要是实现了一个游戏开始界面的两个功能: 1,将鼠标放到"开始游戏"或"结束游 ...
用HTML+CSS做一个漂亮简单的个人网页（第二篇）
时隔三年我把之前给我妹写的毕业论文的网站页面写出来一下哈供各位小伙伴参考参考哈不接受批评反驳哈哈哈哈哈哈哈都是我自己胡乱搭的图片和文字可自行更改,按照自己的审美喜好来哈! 先看页面的图片哈首 ...
IT外企那点儿事(7)：做一个优秀的基层（转）
转自:http://topic.csdn.net/u/20100524/09/635885a9-e075-4eac-b63a-2f75015d0c39.html?69859 1-7在博客中的链接如下, ...
php做一个网页的源代码,用HTML5做一个个人网站此文仅展示个人主页界面。内附源代码下载地址...
下载说明: 1.再好的作品都不如将来要做的作品.在每一次的设计当中都能有所收获,才是设计师在web开发中最得益的. 2.本站所有作品均是杨青个人设计.如果发现模板有错,请尽情谅解. 3.如果遇到什么问 ...
使用three.js做一个网页的相册动画
想了很久不知道有没有必要,但还是记录下来,以后说不定还会用的到,希望大家也有机会试试就先做一个简单的页面,做一下动画,放一些图片吧,以后有新东西还是会加进来的 1.先创建一个html文件,初始化代码 ...
每日一技：给女友用代码做一个3D旋转相册，每天亿遍忘记初恋~
前言不会表白?!我来教你给女朋友或者正在追求的妹子一点小惊喜~ 今天这篇文章就是演示给女友做一个3D旋转相册,学会的小伙伴可以给自己的女朋友或者喜欢的女生做一个,相比几百上千的礼物,零成本的技术实现 ...
教你做一个送别人女友的网页相册（一）（HTML+CSS+JS实现）
女友的网页相册(一) 一丶相册效果二丶代码总结一丶相册效果未展开前展开后相册会自动旋转,底部还有倒影哦(展开时有个很nice的动画效果~). 可以滚动鼠标轮盘放大缩小使用鼠标还可以拖动相册 ...
用HTML+CSS做一个漂亮简单的个人网页~个人相册介绍个人主页模板(6个页面) ~学生HTML个人网页作业作品~
用HTML+CSS做一个漂亮简单的个人网页 ~ 个人相册介绍个人主页模板(6个页面) 学生HTML个人网页作业作品临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作 ...

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

做一个略调皮的个人主页--相册与随笔篇相关推荐

最新文章

热门文章