做一个略调皮的个人主页--相册与随笔篇
来源:互联网 发布:百分百采集软件 编辑:程序博客网 时间:2024/05/03 22:22
目录
做一个略调皮的个人主页--菜单篇
做一个略调皮的个人主页--结构篇
做一个略调皮的个人主页--相册与随笔篇
总算在北京找到个便宜的房子租了,算是稳定下来啦。
新工作的节奏本来很快,有些不适用的,后来UI的方案被老大给毙了,我就又无所事事了···
多谢帮我加目录的人,虽然我现在都不知道是谁=。=
至于ie8兼容性,其实就是opacity这个属性的问题,其余ie8都应该没问题。这儿就不改啦。
这一篇主要主要说的是css3的效果,以我的相册和我的随笔为例。
相册是有三种展开模式,分别是相册模式,照片墙模式以及手风琴模式。具体的形成就不说了,只说一下相册的hover事件还有展开效果。
这是一个相册的html代码,一个area里面有三个box,分别就是展开的三张,然后我们添加css3的动画效果。
首先是,当鼠标移动到area上的时候,三个box的旋转。
注意一下,正常的rotate都是以中心为中心的(有点绕口···),我们要的效果时以右下角为中心,所以需要加上 transform-orgin的属性。
然后是 area的hover 下,三个box的反应。
之后是box的hover时间,当box hover的时候,他要到最上方,覆盖掉其余两个,所以还有一下代码:
这样大体的鼠标hover的效果就好了。然后是点击后的效果。
点击后飘的那个效果可拆分为三个动作,分别是旋转,放大,定位。
旋转的话,旋转的话即旋转90度即可。
放大的话,只要获取窗口的宽和高然后做 一下处理即可。
定位的话,需要算出该area相对于窗口,定位是多少。用offset即可。然后将这个top以及left的值的负数给到点击的那个box上,css给area一个position:relative,这样让box相对于area定位,那么他的top以及left 变成了 area相对于窗口定位的负值,这个box就会定位到窗口的左上角。
这三个动作同时进行,就达到了我们预想的效果。
随笔的三个按钮式css做的,整个加了圆角和阴影,里面加一个半白色的梯度渐变,就是所呈现的效果啦。
之后的文章的展开效果与相册类似,只不过没有旋转,就两个动作,定位,以及增加高度。
这样大体上的效果就呈现出来啦。
阅读原文:做一个略调皮的个人主页--相册与随笔篇
- 做一个略调皮的个人主页--相册与随笔篇
- 做一个略调皮的个人主页--结构篇
- 做一个略调皮的个人主页--菜单篇
- 做一个略调皮的个人主页--游戏篇
- 做一个略调皮的个人博客--菜单篇
- 做一个个人主页
- 表格做的个人主页
- 有谁能帮我做一个个人主页的网页。急需
- 用gulp做一个略完整的前端打包工作~
- 做个人主页。
- Gallery 做的相册 很好的一个学习例子
- Domino平台下做的一个QQ相册应用
- “调皮“的栈帧和与define的众多比较
- gulp-用gulp做一个略完整的前端打包工作
- 一个介绍emacs lisp的个人主页
- HTML5源码-实现一个简单的个人主页
- 一个不错的个人主页(PHP)
- 前篇二:调皮的公主
- Flash片头loading与MovieClipLoader
- lucene中Field.Index,Field.Store详解
- Training of GMM
- host、nslookup、dig命令的使用
- android 关于提高第三方app的service优先级
- 做一个略调皮的个人主页--相册与随笔篇
- 下载CyanogenMod(Android)源码遇到的“not a git repository”问题
- 2014区赛牡丹江
- iBatis 简介
- Android系统详解之获取图片和视频的缩略图
- java 回调函数
- 《dig挖出DNS的秘密》-linux命令五分钟系列之三十四
- 网页webview适应手机分辨率
- mac下eclipse安装svn插件