CSS3样式运用，悬浮立体方块 - html/css语言栏目：-自学php网

来源：自学PHP网时间：2015-04-14 14:51 作者：阅读:次

[导读] 前言作为后端开发者，了解前端是必须的，所以自己琢磨着弄了弄一个CSS3的阴影运用。我记得这应该是以前淘宝用过的，PS：现在跑到淘宝去看，好像没有找到了。现在流行扁平化设计...

前言

作为后端开发者，了解前端是必须的，所以自己琢磨着弄了弄一个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 }

更多文章推荐