zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    17-canvas绘制扇形
    16-canvas绘制圆弧
    15-canvas渐变色
    14-canvas绘制柱状图
    13-绘制矩形的简写方式
    12-es6类的方式封装折线图
    11-canvas绘制折线图
    10-canva绘制数据点
    jenkins 环境部署 (yum安装方式)
    BerkeleyDB安装
  • 原文地址:https://www.cnblogs.com/Lolita-Q/p/13395690.html
Copyright © 2011-2022 走看看