首页 > 代码库 > CSS3样式运用,悬浮立体方块
CSS3样式运用,悬浮立体方块
前言
作为后端开发者,了解前端是必须的,所以自己琢磨着弄了弄一个CSS3的阴影运用。
我记得这应该是以前淘宝用过的,PS:现在跑到淘宝去看,好像没有找到了。现在流行扁平化设计,没有了阴影,没有了立体!
效果图
实现思路
这里一共做了两边,一种是用UL,一种是用DIV啦。
两种没什么区别,这里着重说DIV的方式。
父容器下有三个子元素DIV,全部左浮动,然后设置z-index。选中的(突出的)DIV用另一套样式,hover
用box-shadow属性,可以实现阴影效果,在网上还有-moz-box-shadow ,-webkit-box-shadow,这两种貌似是针对不同的游览器。
这样,这种阴影效果就实现了。
然后是动画切换效果,这里还是用CSS3的属性(为了撸CSS3嘛,javascript也是可以实现的)。
用transition属性,例如 transition: color 0.5s 标记color属性变化的运动过程为0.5s,若有其他的属性变化,就加在后面,用逗号隔开。
同理,其他的三个是针对不同浏览器的。
1 .photoDIV_F 2 { 3 position:relative; 4 z-index:1; 5 width:380px; 6 height:250px; 7 float:left; 8 color:#134f8d; 9 border-top:#7dd302 4px solid;10 background-color:#FFFFFF;11 transition: color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;12 -moz-transition:color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;13 -webkit-transition: color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;14 -o-transition: color 0.5s,margin-top 0.5s,box-shadow 0.5s,border-top 0.5s;15 }
相关资源
CSS3样式运用,悬浮立体方块:http://download.csdn.net/detail/a406502972/8060603
CSS3样式运用,悬浮立体方块
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。