zoukankan      html  css  js  c++  java
  • 从页面左边飞入页面动画效果

    body {
    overflow: hidden;
    /*此处需要设置溢出隐藏,否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/
    }


    /*定义一个名字为lefteaseinAnimate动画,实现从页面的左边淡入页面效果*/

    @keyframes lefteaseinAnimate {
    0% {
    transform: translateX(-2000px);
    opacity: 0;
    }
    /*在0%时设置文字在想X轴-2000px位移处(左边),透明度为0,也就是看不见文字*/
    100% {
    transform: translateX(0px);
    opacity: 1;
    }
    /*在100%时设置文字在想X轴0px位移处,也就是原始布局的位置,透明度为1,也就是文字可以看见了*/
    }

    @-webkit-keyframes lefteaseinAnimate {
    0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    }
    100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
    }
    }

    @-o-keyframes lefteaseinAnimate {
    0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    }
    100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
    }
    }

    @-ms-keyframes lefteaseinAnimate {
    0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    }
    100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
    }
    }

    @-moz-keyframes lefteaseinAnimate {
    0% {
    -webkit-transform: translateX(-2000px);
    opacity: 0;
    }
    100% {
    -webkit-transform: translateX(0px);
    opacity: 1;
    }
    }

    .word {
    animation: lefteaseinAnimate 1s ease 1;
    /*调用已定义好的动画lefteaseinAnimate,全程运行时间1S,进入的速度曲线为ease,只播放一次*/
    -webkit-animation: lefteaseinAnimate 1s ease 1;
    -ms-animation: lefteaseinAnimate 1s ease 1;
    -o-animation: lefteaseinAnimate 1s ease 1;
    -moz-animation: lefteaseinAnimate 1s ease 1;
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    }
  • 相关阅读:
    docker安装nginx
    docker安装tomcat&部署javaweb程序
    linux/work
    Go语言入门篇-gRPC基于golang & java简单实现
    Go语言入门篇-jwt(json web token)权限验证
    Go语言入门篇-JSON&http调用
    Go语言入门篇-基本流程控制
    Go语言入门篇-基本类型排序和 slice 排序
    Go语言入门篇-高级数据类型
    Go语言入门篇-基本数据类型
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5516625.html
Copyright © 2011-2022 走看看