為頁面的body添加css樣式
/*頁面切換方式*/
body{
opacity: 0;
animation: page-fade-in 1s forwards;
}
@keyframes page-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*跟多的過渡方式*/
@keyframes page-scale-up {
0% {
opacity: 0;
transform: scale(.9)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes page-scale-down {
0% {
opacity: 0;
transform: scale(1.8)
}
100% {
opacity: 1;
transform: scale(1)
}
}
@keyframes page-slide-top {
0% {
opacity: 0;
transform: translateY(-100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes page-slide-bottom {
0% {
opacity: 0;
transform: translateY(100%)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
@keyframes page-slide-left {
0% {
opacity: 0;
transform: translateX(-100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
@keyframes page-slide-right {
0% {
opacity: 0;
transform: translateX(100%)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
————————————————
版權(quán)聲明：本文為CSDN博主「iVRJay」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/iVRJay/java/article/details/94622171
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
