CSS3是網頁設計中最流行的標記語言之一,它可以用來實現各種吸引人的效果。其中,3D爆炸效果是一種非常受歡迎的效果,可以讓網站更加生動、有趣。
.box{ width: 200px; height: 200px; position: relative; perspective: 1400px; } .box .wrapper{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: explode 2s forwards; } .box .face{ width: 100%; height: 100%; position: absolute; backface-visibility: hidden; } .box .face.front{ transform: translateZ(100px); } .box .face.right{ transform: rotateY(90deg) translateZ(100px); } .box .face.back{ transform: rotateY(180deg) translateZ(100px); } .box .face.left{ transform: rotateY(-90deg) translateZ(100px); } .box .face.top{ transform: rotateX(90deg) translateZ(100px); } .box .face.bottom{ transform: rotateX(-90deg) translateZ(100px); } @keyframes explode{ 0%{ transform: rotateX(0) rotateY(0) translateZ(0); } 100%{ transform: rotateX(70deg) rotateY(30deg) translateZ(1200px); } }
以上是實現3D爆炸效果的CSS代碼。其中,.box代表立方體容器,.wrapper代表立方體包裹層,.face代表立方體的六個面。通過給每個面設置不同的transform屬性,可以讓立方體呈現出3D效果。
同時,我們使用了關鍵幀動畫(@keyframes)來實現爆炸效果。在初始狀態下,立方體還在原地;但在動畫結束時,立方體將旋轉70度并向一個方向移動1200像素,讓用戶看起來是向著自己飛來的。
總的來說,3D爆炸效果是一種非常適合用來給網站增加流行元素的效果。如果你想要讓你的網站更具生命力,不妨試一試吧!