CSS3立方體在頁面中常常用來實現一些轉場效果,它的陰影效果可以為立方體增添立體感和深度感。下面介紹一些實現陰影效果的CSS3代碼:
.cube{ position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform: translateZ(-150px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); }
這段代碼中,首先將立方體的z軸平移了-150px,生成了陰影的效果。其中box-shadow屬性中,參數0 10px 15px分別為陰影的橫向偏移量、縱向偏移量、模糊半徑;rgba(0, 0, 0, 0.4)表示陰影的顏色為黑色,透明度為0.4。
此外,通過box-shadow的額外屬性inset,可以讓陰影在立方體內部產生,實現一些特殊的效果。示例代碼如下:
.cube{ position: relative; width: 200px; height: 200px; transform-style: preserve-3d; box-shadow: inset 0 0 50px 10px rgba(0, 0, 0, 0.6); }
這段代碼中,inset表示陰影在內部產生,其他屬性的含義和上面的代碼一樣。可以看到,這樣的效果感覺立方體的表面有凹進去,非常有趣。
上一篇mysql查詢從機狀態
下一篇css3立即執行完