iframe跳轉時頁面閃爍

為頁面的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)
    }
}
————————————————
版權聲明：本文為CSDN博主「iVRJay」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/iVRJay/java/article/details/94622171