目录
做一个略调皮的个人主页--相册与随笔篇
总算在北京找到个便宜的房子租了,算是稳定下来啦。
新工作的节奏本来很快,有些不适用的,后来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; } }
之后的文章的展开效果与相册类似,只不过没有旋转,就两个动作,定位,以及增加高度。
这样大体上的效果就呈现出来啦。
阅读原文:做一个略调皮的个人主页--相册与随笔篇
相关推荐
教师随笔-教师政治学习笔记随笔5篇.docx
教师随笔-教师政治教学反思随笔5篇.docx
教师随笔-小班教师政治随笔5篇.docx
精品--深度学习和NLP随笔
一、操作系统的介绍:1.什么是Linux 2.Linux历史 3.Linux核心概念 4.linux组成 5.liunx发型版本 6.虚拟机 7.32位与64位操作系统的区别
【Java - 框架 - Knife4j】随笔
教师随笔-初中道德与法治教师随笔5篇.docx
教师随笔-政治教师读书随笔5篇.docx
20210721-国信证券-市场思考随笔之六十四:投资理念,新旧转换,越转越快.pdf
教师随笔-高中政治课教师教学随笔5篇.docx
容斋随笔
幼儿园教案2021-亲子教育反思[随笔].doc
教师随笔-初中政治教师教学西方教育随笔5篇.docx
在很多方面,管理一个大型的计算机编程项目和其他行业的大型工程很相似--比大多数程序员所认为的还要相似;在很多另外的方面,它又有差别--比大多数职业经理所认为的差别还要大。
前言在网上看到一篇挺有感触的文章,想在这里记录下来全栈工程师的发展在系统全面的大公司,全栈工程师并没有一个稳定的发展职位。我无比赞同知乎那个帖子里面这样的一句话
一个人的城市随笔.doc
幼儿园中班老师个人随笔五篇参考.docx
这是我学习arm嵌入式linux开发板过程中遇到的一些问题,开发板核心事三星的6410.
顶层模块每隔5ms,发出一个is_read高电平,下面的模块读取一次数据,并计算,更新LED状态。有关计算都用的ip核,占用资源很大。 代码随笔,希望对小小小小白有所帮助。 压缩包里面有代码.v和doc随笔。
中学英语老师个人年终随笔范文精选五篇.docx