HTML5+CSS3，輕鬆做出小米官網產品立體陰影交互效果

小米官網給人的感覺就是整潔，清新，雖然我們的雷總不會去關心代碼，但從這些細節可以看得出來，小米是家認真做產品的公司，好啦，言歸正題吧。

今天要分享的一個小效果——小米官網產品立體陰影交互效果，

正常效果

滑鼠移上去的效果

代碼在這裡

分享代碼如下：

/* 小米官網產品交互效果 */

.review-item {

position: relative;

float: left;

width: 296px;

height: 415px;

margin-left: 14px;

margin-bottom: 14px;

background: #fff;

-webkit-transition: all .2s linear;

transition: all .2s linear;

}

.review-item:hover {

z-index: 2;

-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);

box-shadow: 0 15px 30px rgba(0,0,0,0.1);

-webkit-transform: translate3d(0, -2px, 0);

transform: translate3d(0, -2px, 0);

}