![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5iNyYTN4IjNjRDMyEmY0MjNlFmZ3ITN4cDZlRDN4AzM38CXxAzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLzM3Lc9CX6MHc0RHaiojIsJye.png)
今天我們想與大家分享一組創意的頁面切換熊效果集合。我們已經在示例中羅列了一組動畫,可以被應用到頁面切換過程中,創造出很有趣的導航效果。雖然有些效果非常簡單,隻是簡單的滑動動作,但另外的一些則是利用了視角和 3D 轉換來創造一些立體動感的效果。
今天我們想與大家分享一組創意的頁面切換熊效果集合。我們已經在示例中羅列了一組動畫,可以被應用到頁面切換過程中,創造出很有趣的導航效果。雖然有些效果都非常簡單,隻是簡單的滑動動作,但另外的一些則是利用了視角(Perspective)和 3D 轉換(3D Transforms)來創造一些立體動感的效果。
立即下載下傳 線上示範
溫馨提示:為保證最佳的效果,請在 IE10+、Chrome、Firefox 和 Safari 等現代浏覽器中浏覽。
CSS 動畫根據它們的實作的效果分為不同的組。為展示頁面過渡效果,我們使用以下結構:
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1">
<h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
</div>
<div class="pt-page pt-page-2"><!-- ... --></div>
<!-- ... -->
</div>
透視容器的位置是相對的,我們增加1200像素透視它。所有動畫效果都需要以下的樣式:
.pt-perspective {
position: relative;
width: 100%;
height: 100%;
perspective: 1200px;
transform-style: preserve-3d;
}
.pt-page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.pt-page-current,
.no-js .pt-page {
visibility: visible;
}
.no-js body {
overflow: auto;
}
.pt-page-ontop {
z-index: 999;
}
上面的 .pt-page-ontop 樣式用于某些頁面過渡效果,即我們需要讓一個頁面留在另一個頁面的頂部。下面是一個代碼例子,展示了動畫類和關鍵幀動畫,在不同方向上縮放網頁和以及淡入淡出效果:
/* scale and fade */
.pt-page-scaleDown {
animation: scaleDown .7s ease both;
}
.pt-page-scaleUp {
animation: scaleUp .7s ease both;
}
.pt-page-scaleUpDown {
animation: scaleUpDown .5s ease both;
}
.pt-page-scaleDownUp {
animation: scaleDownUp .5s ease both;
}
.pt-page-scaleDownCenter {
animation: scaleDownCenter .4s ease-in both;
}
.pt-page-scaleUpCenter {
animation: scaleUpCenter .4s ease-out both;
}
/************ keyframes ************/
/* scale and fade */
@keyframes scaleDown {
to { opacity: 0; transform: scale(.8); }
}
@keyframes scaleUp {
from { opacity: 0; transform: scale(.8); }
}
@keyframes scaleUpDown {
from { opacity: 0; transform: scale(1.2); }
}
@keyframes scaleDownUp {
to { opacity: 0; transform: scale(1.2); }
}
@keyframes scaleDownCenter {
to { opacity: 0; transform: scale(.7); }
}
@keyframes scaleUpCenter {
from { opacity: 0; transform: scale(.7); }
}
對于本示範的目的,我們采用了相應的動畫類應用到目前頁以及即将切換進來的頁面,例如:
//...
case 17:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromRight pt-page-ontop';
break;
case 18:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromLeft pt-page-ontop';
break;
case 19:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromBottom pt-page-ontop';
break;
// ...
檢視示範,您可以通過點選第一個按鈕來浏覽一整套的頁面切換效果,您也可以選擇從下拉菜單中選擇一個特定的效果進行預覽。
我希望你會喜歡這個并從中得到啟發,創作出一些更加令人興奮的東西!