zoukankan      html  css  js  c++  java
  • css3 切换贞动画的效果,仿gif效果

    /*---第一组动画---*/
        .cartonGif_1{
            position: absolute;
            display: block;
            background:url("img/haihangzhuanqu/0-1.png") no-repeat center center/100% 100% ;
            -webkit-animation-name: charector-1;/* 动画名称 */
            -webkit-animation-iteration-count: infinite;/* 动画无限播放 */
            -webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */
            -webkit-animation-duration: 950ms;/* 动画运行的时间 */
        }
        @-webkit-keyframes charector-1{
            0% {background-position: 0 0;}
            25% {background:url("img/haihangzhuanqu/0-1.png")  no-repeat center center/100% 100%;}
            50% {background:url("img/haihangzhuanqu/0-2.png")  no-repeat center center/100% 100%;}
            75% {background:url("img/haihangzhuanqu/0-3.png")  no-repeat center center/100% 100%;}
            100% {background:url("img/haihangzhuanqu/0-4.png")  no-repeat center center/100% 100%;}
        }
        /*---第二组动画---*/
        .cartonGif_2{
            position: absolute;
            display: block;
            background:url("img/haihangzhuanqu/1-1.png")  no-repeat center center/100% 100%;
            -webkit-animation-name: charector-2;/* 动画名称 */
            -webkit-animation-iteration-count: infinite;/* 动画无限播放 */
            -webkit-animation-timing-function: step-start;/* 马上跳到动画每一结束桢的状态 */
            -webkit-animation-duration: 950ms;/* 动画运行的时间 */
        }
        @-webkit-keyframes charector-2{
            0% {background-position: 0 0;}
            25% {background:url("img/haihangzhuanqu/1-1.png")  no-repeat center center/100% 100%;}
            50% {background:url("img/haihangzhuanqu/1-2.png")  no-repeat center center/100% 100%;}
            75% {background:url("img/haihangzhuanqu/1-3.png")  no-repeat center center/100% 100%;}
            100% {background:url("img/haihangzhuanqu/1-4.png")  no-repeat center center/100% 100%;}
        }
  • 相关阅读:
    API开放平台基于accessToken实现
    web记住我功能的实现
    SpringBoot整合AbstractRoutingDataSource实现读写分离
    手写简化版SpringBoot
    mybatisGenerator
    C程序编译执行过程
    用WaveX实现音频文件的录音
    java学习--数组
    Linux学习笔记--vim
    PHP常量总结
  • 原文地址:https://www.cnblogs.com/Kummy/p/4882315.html
Copyright © 2011-2022 走看看