CSS3重力全景是一種用于網(wǎng)頁設(shè)計(jì)的新技術(shù),它可以讓網(wǎng)頁背景的圖片隨著鼠標(biāo)的移動(dòng)而有如在空間中漂浮一樣的效果,非常炫酷。
實(shí)現(xiàn)這種效果的方法是使用CSS3中的3D變換和動(dòng)畫效果,這需要對CSS3有一定的了解才能進(jìn)行操作。
.gra{ background: url(images/gravity.jpg); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; -webkit-perspective: 1000px; perspective: 1000px; } .gra img{ width: 25%; z-index: 5; position: absolute; top: 70%; left: calc(50% - 12.5%); -webkit-animation: animate 20s infinite; animation: animate 20s infinite; } @-webkit-keyframes animate { 0% { -webkit-transform: rotateY(0deg) translateY(0); transform: rotateY(0deg) translateY(0); } 100% { -webkit-transform: rotateY(-360deg) translateY(-800px); transform: rotateY(-360deg) translateY(-800px); } } @keyframes animate { 0% { -webkit-transform: rotateY(0deg) translateY(0); transform: rotateY(0deg) translateY(0); } 100% { -webkit-transform: rotateY(-360deg) translateY(-800px); transform: rotateY(-360deg) translateY(-800px); }
以上是一個(gè)簡單的CSS代碼示例,其中包含了背景圖片的鏈接,定位與大小等基本樣式,并為圖片添加了3D旋轉(zhuǎn)和動(dòng)畫效果。
需要注意的是,這里使用了CSS3自帶的變換和動(dòng)畫效果,需要瀏覽器支持才能正常運(yùn)行,部分舊版瀏覽器可能無法顯示。
總而言之,CSS3重力全景是一種非常炫酷的網(wǎng)頁設(shè)計(jì)技術(shù),可以提高頁面的視覺效果和用戶體驗(yàn)。
上一篇css3重置樣式
下一篇mysql查表名和字段名