CSS3樣式運用，懸浮立體方塊

本文轉載自查看原文 2014-10-20 18:12 1516 前端設計

前言

作為后端開發者，了解前端是必須的，所以自己琢磨着弄了弄一個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樣式運用，懸浮立體方塊

前言

實現思路

相關資源

免責聲明！